Neste artigo você vai conferir as melhores práticas de estilos inline em React JS, uma ação importante da biblioteca!

Fala programador(a), beleza? Bora aprender mais sobre React!

Estilizar componentes é uma parte integrante do desenvolvimento de aplicativos em React JS.

Embora as folhas de estilo CSS sejam a maneira tradicional de aplicar estilos, o React JS oferece uma abordagem alternativa chamada estilos inline.

Os estilos inline permitem que você aplique estilos diretamente a um componente em seu código JSX. Isso é feito passando um objeto JavaScript para a propriedade style de um elemento.

Por exemplo:

const MyComponent = () => {
  return <div style={{ color: 'blue', fontSize: '14px' }}>Olá, mundo!</div>;
};

Embora os estilos inline sejam uma ferramenta útil, eles também têm suas próprias considerações e melhores práticas. Vamos dar uma olhada.

Usando a Convenção CamelCase

O React JS utiliza a convenção camelCase para nomes de propriedades em estilos inline. Isso significa que, em vez de escrever o nome da propriedade CSS com hífens (como font-size), você deve usar camelCase (como fontSize).

const MyComponent = () => {
  return <div style={{ backgroundColor: 'blue', fontSize: '14px' }}>Olá, mundo!</div>;
};

Valores de Estilo como Strings ou Números

No React JS, os valores de estilo podem ser especificados como strings ou números. Se você usar uma string, pode especificar o valor exatamente como faria em CSS.

Se usar um número, o React JS automaticamente adicionará a unidade px ao valor.

const MyComponent = () => {
  return <div style={{ fontSize: 14 }}>Olá, mundo!</div>; // Renderiza como 'font-size: 14px'
};

Usando Estilos Condicionais

Os estilos inline podem ser manipulados dinamicamente usando JavaScript. Isso é especialmente útil para estilos condicionais que dependem do estado do componente ou das props.

const MyComponent = ({ isActive }) => {
  const buttonStyle = {
    backgroundColor: isActive ? 'blue' : 'gray',
    fontSize: '14px',
  };

  return <button style={buttonStyle}>Clique em mim</button>;
};

Evitando Estilos Inline para CSS Complexo

Embora os estilos inline sejam convenientes para estilização básica, eles podem se tornar complicados e difíceis de gerenciar para CSS mais complexo.

Nestes casos, pode ser preferível usar uma folha de estilo CSS separada ou uma biblioteca CSS-in-JS como Styled Components ou Emotion.

Melhorando a Performance com o useMemo

Os estilos inline em React JS são recriados a cada renderização do componente. Isso pode levar a problemas de desempenho para componentes que são renderizados frequentemente.

O Hook useMemo do React pode ser usado para memorizar o objeto de estilo e evitar recriá-lo a cada renderização.

import { useMemo } from 'react';

const MyComponent = ({ isActive }) => {
  const buttonStyle = useMemo(() => ({
    backgroundColor: isActive ? 'blue' : 'gray',
    fontSize: '14px',
  }), [isActive]);

  return <button style={buttonStyle}>Clique em mim</button>;
};

Agrupando Estilos

Às vezes, você pode querer reutilizar estilos em diferentes componentes ou em diferentes partes do mesmo componente.

Em vez de reescrever os mesmos estilos várias vezes, você pode agrupá-los em um objeto de estilo e reutilizá-los conforme necessário.

const sharedStyles = {
  color: 'blue',
  fontSize: '14px',
};

const MyComponent = () => {
  return (
    <div>
      <p style={sharedStyles}>Este é um parágrafo.</p>
      <p style={sharedStyles}>Este é outro parágrafo.</p>
    </div>
  );
};

Combinando Estilos

Os estilos inline em React são especificados como objetos JavaScript, o que significa que você pode facilmente combiná-los usando a propagação do objeto.

Isso é útil quando você quer aplicar vários estilos a um componente, alguns dos quais podem ser condicionais.

const buttonStyles = {
  fontSize: '14px',
  padding: '10px',
};

const MyComponent = ({ isActive }) => {
  const activeStyles = isActive ? { backgroundColor: 'blue' } : { backgroundColor: 'gray' };

  return <button style={{ ...buttonStyles, ...activeStyles }}>Clique em mim</button>;
};

Estilos Inline vs. CSS em JS

Embora os estilos inline sejam convenientes para a estilização básica, eles têm suas limitações. Por exemplo, eles não suportam pseudoclasses como :hover e :active, nem permitem a definição de estilos de mídia.

Nesses casos, pode ser mais apropriado usar uma biblioteca de CSS-in-JS como Styled Components ou Emotion, que oferece a flexibilidade do JavaScript com todas as características do CSS.

import styled from 'styled-components';

const Button = styled.button`
  font-size: 14px;
  padding: 10px;

  &:hover {
    background-color: blue;
  }
`;

const MyComponent = () => {
  return <Button>Clique em mim</Button>;
};

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Os estilos inline oferecem uma maneira rápida e dinâmica de aplicar estilos em React JS. No entanto, é importante estar ciente de suas limitações e das alternativas disponíveis.

Ao entender quando e como usar os estilos inline efetivamente, você pode desenvolver aplicativos React que são tanto visualmente impressionantes quanto eficientes em termos de desempenho.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.