CSS-in-JS es una técnica de estilización que permite a los desarrolladores de ReactJS escribir CSS directamente en su código JavaScript. Esto puede hacer que la gestión de estilos sea más conveniente al agrupar los estilos con el código JavaScript correspondiente.
Para usar CSS-in-JS en React, puedes optar por bibliotecas externas como styled-components, emotion, jss, etc. Vamos a usar styled-components como ejemplo:
1. Primero, instala styled-components con npm:
```
npm install —save styled-components
```
o con yarn:
```
yarn add styled-components
```
2. Importa `styled` desde `styled-components` en tu archivo :
```jsx
import styled from ‘styled-components‘
```
3. Crea un componente styled:
```jsx
const Button = styled.button`
background: blue;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: none;
border-radius: 4px;
cursor: pointer;
`;
```
4. Y luego puedes usar este componente styled igual que cualquier otro componente de React:
```jsx
function App() {
return (
La principal ventaja de usar CSS-in-JS es que te permite administrar tus estilos con todas las ventajas que tiene trabajar en JavaScript, como el uso de variables, funciones, importaciones, etc., haciéndolo especialmente útil para estilos dinámicos basados en props o estado del componente.
Nota: Algunas personas pueden argumentar que esta no es la mejor práctica ya que mezcla lógica de presentación (CSS) con lógica de negocio (JavaScript). Por eso, al final del día, se reduce a las preferencias del equipo y a las necesidades del proyecto.
