Usando Estilos Inline no React

Uma maneira simples de aplicar estilos no React é utilizando estilos inline, semelhante à forma como estilos são adicionados a elementos HTML usando o atributo style.

A principal diferença é que, no React, o valor do atributo style é um objeto JavaScript, e não uma string CSS.

Veja um exemplo de aplicação de estilos inline diretamente no JSX:

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

Neste exemplo, o elemento h1 recebe estilos por meio do atributo style, que contém um objeto JavaScript.

Regras Importantes para Estilos Inline

Ao utilizar estilos inline no React, considere as seguintes regras:

• Nomes de propriedades CSS com duas ou mais palavras devem usar camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Os valores geralmente são escritos como strings: "32px", "red", "rebeccapurple";
• Algumas propriedades podem aceitar números diretamente: fontWeight: 700.

Essas regras existem porque os estilos inline são escritos em JavaScript, e não em CSS puro.

Estilos Inline como Objeto Separado

Para manter o JSX mais limpo e fácil de ler, os estilos inline podem ser armazenados em um objeto JavaScript separado e, em seguida, passados para o atributo style.

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

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

Quando Usar Estilos Inline

Estilos inline são mais adequados para:

• Componentes pequenos;
• Estilos dinâmicos;
• Ajustes visuais rápidos.

Eles não são ideais para layouts grandes ou estilizações complexas, por isso o CSS externo é frequentemente preferido.