Lavorare con gli stili CSS nell'attributo style in React

Nelle lezioni precedenti nell'attributo style abbiamo passato una variabile contenente un oggetto con gli stili CSS. Puoi non utilizzare una variabile intermedia, ma scrivere l'oggetto direttamente nell'attributo - in questo caso ci servono due paia di parentesi graffe - la prima per l'inserimento JSX e la seconda - per l'oggetto.

Quindi, prendiamo il nostro componente senza stili CSS:

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

Ad esempio, scriviamo direttamente le proprietà CSS per il primo paragrafo del nostro componente React App:

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

In modo simile aggiungiamo gli stili per gli altri tag.

Di conseguenza, il codice del componente avrà il seguente aspetto:

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