Inserción de datos en el atributo style desde variables en React

En la lección anterior escribimos el objeto directamente en el atributo style. También podemos utilizar la inserción de datos en este objeto desde variables.

Tomemos nuestro componente React sin estilos CSS:

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

Ahora crearemos variables y les asignaremos valores de propiedades CSS. Empecemos en orden con los estilos para el div.

En el archivo del componente, antes del comando return, creemos la variable wd1 y asignémosle el valor '200px':

App.jsconst wd1 = '200px';

De manera similar, creemos variables para todos los valores de las propiedades de nuestro div:

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

Ahora agreguemos variables para el primer párrafo:

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

Para el segundo párrafo:

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

Y, finalmente, para el último. Aquí solo se necesitarán dos, y no tres variables. No tiene sentido repetirse, ya que el valor bold ya lo tenemos para el primer párrafo:

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

Y ahora sustituiremos las variables con los valores de estilos. Hagamos esto para el primer párrafo. Insertemos las variables co1 y fw1 en lugar de los valores en el objeto:

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

Procederemos de manera similar con las demás etiquetas.

Como resultado, el código de nuestro componente se verá así:

App.jsfunction App() {

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

  //para el primer p:
  const co1 = 'orangered';
  const fw1 = 'bold';

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

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