Un enfoque sencillo pero algo limitado para agregar estilos es utilizar estilos en línea, similar a cómo aplicamos estilos a los elementos HTML usando el atributo style. En React, la única diferencia es que el valor de este atributo es un objeto, no una cadena de texto. Analicemos los detalles.

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

El componente App en el ejemplo anterior incluye un elemento h1 con estilos en línea definidos mediante el atributo style. Algunos puntos clave a tener en cuenta sobre los estilos en línea:

• Los nombres de las propiedades que contienen dos o más palabras deben seguir la notación camel case (camelCase). Por ejemplo, en lugar de usar la propiedad CSS font-weight, se debe utilizar fontWeight;
• Al asignar valores a las propiedades CSS, generalmente se utilizan cadenas de texto, excepto para las propiedades que esperan números simples. Por eso la propiedad fontWeight utiliza un número (700) como valor, mientras que la propiedad fontSize utiliza un valor de cadena (32px).

Estilos en línea en forma de objeto separado

Para mantener nuestro código JSX limpio y enfocado, podemos definir los estilos en línea como un objeto JavaScript separado y luego asignar ese objeto al atributo style. Este enfoque mejora la mantenibilidad y legibilidad de nuestros componentes.

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

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

En este ejemplo, se introduce el objeto appStyles, que representa los mismos estilos utilizados anteriormente pero ahora como un objeto separado. Esta separación de responsabilidades mejora la claridad del código del componente.