¿Cómo hacer encapsulación de estilos en Reactjs?

La encapsulación de estilos en Reactjs puede ser lograda utilizando varias técnicas o bibliotecas:

1. Estilos en línea: En React, es común usar estilos en línea en lugar de hojas de estilo en cascada (CSS). Esto se hace pasando un objeto JavaScript que contiene pares de propiedad y valor a la propiedad de estilo. Cada clave en el objeto JavaScript corresponde a una propiedad CSS y se expresa en camelCase.

Ejemplo:

```jsx
var myStyle = { fontSize: 100, color: ‘#FF00FF‘
};
return (

Hola Mundo

);
```

2. CSS Modules: Es una librería que permite encapsular estilos al nivel del componente. CSS Modules compila tus estilos con un hash único, por lo que los conflictos de nombres se eliminan por completo.

Ejemplo:

```jsx
import styles from ‘./myStyles.module.css’;

function MyApp() { return

Hola Mundo

;
}
```

3. Styled-components: Es una biblioteca de CSS-in-JS que le permite escribir CSS real para estilizar sus componentes. Ofrece automáticamente el aislamiento de estilos al generar una clase única para cada componente.

Ejemplo:

```jsx
import styled from ‘styled-components’;

const StyledDiv = styled.div` color: blue; font-size: 20px;
`;

function MyApp() { return Hola Mundo;
}
```

4. Emotion: Muy similar a styled-components, pero proporciona algunas funcionalidades adicionales como el renderizado por el lado del servidor, la composición de estilos y otras más.

Ejemplo:

```jsx
/** jsx jsx */ import { css, jsx } from 'emotion/core’

const style = css` color: blue; font-size: 20px;
`;

function MyApp() { return

Hola Mundo

;
}
```

Estos son solo algunos ejemplos de cómo se puede implementar la encapsulación de estilos en React.