Inserindo dados no atributo style a partir de variáveis no React

Na lição anterior, escrevemos o objeto diretamente no atributo style. Também podemos usar a inserção de dados nesse objeto a partir de variáveis.

Vamos pegar nosso componente React sem estilos CSS:

App.jsfunction App() {
  return (
    <div>
      <p>texto</p>
      <p>texto</p>
      <p>texto</p>
    </div>
  );
}

Agora vamos criar variáveis e atribuir a elas os valores das propriedades CSS. Vamos começar em ordem com os estilos para a div.

No arquivo do componente, antes do comando return, vamos criar a variável wd1 e atribuir a ela o valor '200px':

App.jsconst wd1 = '200px';

De maneira similar, vamos criar variáveis para todos os valores das propriedades da nossa div:

App.jsconst wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Agora vamos adicionar variáveis para o primeiro parágrafo:

App.jsconst co1 = 'orangered';
const fw1 = 'bold';

Para o segundo parágrafo:

App.jsconst fs1 = 'italic';
const co2 = 'brown';

E, finalmente, para o último. Aqui serão necessárias apenas duas, e não três variáveis. Não faz sentido repetir, pois o valor bold nós já temos para o primeiro parágrafo:

App.jsconst bco1 = 'orange';
const co3 = 'white';

E agora vamos substituir as variáveis com os valores de estilos. Vamos fazer isso para o primeiro parágrafo. Vamos inserir as variáveis co1 e fw1 no lugar dos valores no objeto:

App.js<p style = {{ color: co1, fontWeight: fw1 }}>
  texto
</p>

Faremos o mesmo com as demais tags.

Como resultado, o código do nosso componente ficará assim:

App.jsfunction App() {

  //para div:
  const wd1 = '200px';
  const br1 = '2px solid brown';
  const pd1 = '10px';
  const ta1 = 'center';

  //para o primeiro p:
  const co1 = 'orangered';
  const fw1 = 'bold';

  //para o segundo p:
  const fs1 = 'italic';
  const co2 = 'brown';
  
  //para o terceiro p:
  const bco1 = 'orange';
  const co3 = 'white';

  return (
    <div style = {{
      width: wd1,
      border: br1,
      padding: pd1,
      textAlign: ta1 }}>
      <p style = {{ color: co1, fontWeight: fw1 }}>
        texto
      </p>
      <p style = {{ fontStyle: fs1, color: co2 }}>
        texto
      </p>
      <p style = {{ 
        backgroundColor: bco1,
        fontWeight: fw1,
        color: co3 }}>
        texto
      </p>
    </div>
  );
}