Rad sa CSS stilovima u atributu style u React-u

U prethodnim lekcijama u atribut style prosledili smo promenljivu koja sadrži objekat sa CSS stilovima. Možete izbeći korišćenje međupromenljive i napisati objekat direktno u atributu - u tom slučaju su nam potrebne dva para vitičastih zagrada - prva za JSX umetanje, a druga - za objekat.

Dakle, uzmimo naš komponent bez CSS stilova:

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

Na primer, postavimo direktno CSS svojstva za prvi pasus našeg React komponenta App:

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

Na sličan način dodajmo stilove za ostale tagove.

Kao rezultat, kod komponenta će izgledati na sledeći način:

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