Werk met CSS style in die style attribuut in React

In vorige lesse het ons 'n veranderlike wat 'n voorwerp met CSS style bevat oorgedra na die attribuut style. Jy kan die tussenveranderlike weglat en die voorwerp reguit in die attribuut skryf - in hierdie geval het ons twee paar krulhakes nodig - die eerste een vir die JSX inskrywing, en die tweede een vir die voorwerp.

So, kom ons neem ons komponent sonder CSS style:

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

Byvoorbeeld, laat ons direk CSS eienskappe vir die eerste paragraaf van ons React komponent App inskryf:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  text
</p>

Voeg op 'n soortgelyke manier style by vir die res van die etikette.

As gevolg hiervan sal die komponent se kode soos volg lyk:

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        text
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        text
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        text
      </p>
    </div>
  );
}