Uma abordagem simples, porém um pouco limitada, para adicionar estilos é o uso de estilos inline, semelhante a como aplicamos estilos aos elementos HTML usando o atributo style. No React, a única diferença é que o valor para esse atributo é um objeto, e não uma string. Vamos examinar os detalhes.

O componente App no exemplo acima inclui um elemento h1 com estilos inline definidos usando o atributo style. Aqui estão alguns pontos importantes para lembrar sobre estilos inline:

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

Estilos Inline na forma de um Objeto Separado

Para manter nosso código JSX limpo e focado, podemos definir os estilos inline como um objeto JavaScript separado e, em seguida, atribuir esse objeto ao atributo style. Esta abordagem melhora a manutenibilidade e a legibilidade dos nossos componentes.

Neste exemplo, introduzimos o objeto estilosApp, representando os mesmos estilos usados anteriormente, mas agora como um objeto separado. Esta separação de conceitos realça a clareza do código do nosso componente.