Una forma sencilla de aplicar estilos en React es utilizando estilos en línea, de manera similar a cómo se agregan estilos a los elementos HTML usando el atributo style.

La diferencia clave es que en React, el valor del atributo style es un objeto de JavaScript, no una cadena de CSS.

Aquí tienes un ejemplo de cómo aplicar estilos en línea directamente dentro de JSX:

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

En este ejemplo, el elemento h1 recibe estilos a través del atributo style, que contiene un objeto de JavaScript.

Reglas importantes para los estilos en línea

Al utilizar estilos en línea en React, ten en cuenta las siguientes reglas:

• Los nombres de las propiedades CSS con dos o más palabras deben utilizar camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Los valores suelen escribirse como cadenas: "32px", "red", "rebeccapurple";
• Algunas propiedades pueden aceptar números directamente: fontWeight: 700.

Estas reglas existen porque los estilos en línea se escriben en JavaScript, no en CSS puro.

Estilos en línea como un objeto separado

Para mantener el JSX más limpio y fácil de leer, los estilos en línea pueden almacenarse en un objeto de JavaScript separado y luego pasarse al atributo style.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

Cuándo usar estilos en línea

Los estilos en línea funcionan mejor para:

• Componentes pequeños;
• Estilos dinámicos;
• Ajustes visuales rápidos.

No son ideales para diseños grandes o estilos complejos, por lo que a menudo se prefiere CSS externo.