Uma abordagem simples, porém um pouco limitada, para adicionar estilos é utilizar estilos inline, semelhante à aplicação de estilos em elementos HTML usando o atributo style. No React, a única diferença é que o valor desse atributo é um objeto, e não uma string. Vamos analisar os detalhes.

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

O componente App no exemplo acima inclui um elemento h1 com estilos inline definidos usando o atributo style. Alguns pontos importantes sobre estilos inline:

• Nomes de propriedades com duas ou mais palavras devem seguir a notação camel case (camelCase). Por exemplo, em vez de usar a propriedade CSS font-weight, deve-se usar fontWeight;
• Ao atribuir valores às propriedades CSS, geralmente utilizam-se strings, exceto para propriedades que aceitam apenas números. Por isso, a propriedade fontWeight utiliza um número (700) como valor, enquanto a propriedade fontSize utiliza um valor em string (32px).

Estilos Inline na Forma de um Objeto Separado

Para manter o código JSX limpo e organizado, é possível definir os estilos inline como um objeto JavaScript separado e, em seguida, atribuir esse objeto ao atributo style. Essa abordagem melhora a manutenção e a legibilidade dos componentes.

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

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

Neste exemplo, é apresentado o objeto appStyles, que representa os mesmos estilos utilizados anteriormente, mas agora como um objeto separado. Essa separação de responsabilidades aumenta a clareza do código do componente.