Duomenų įterpimas į style atributą iš objekto React

CSS stilius elementams taip pat galima pridėti ir naudojant atributą style. Šioje ir keliose kitose pamokose mes apžvelgsime inline stiliaus taikymo būdus.

Dabar nebesijungsime failo styles.css, o perduosime atitinkamas reikšmes į atributą style kaip objektą su stiliais kiekvienai žymai, kuriuos mes rašysime tiesiai komponento faile.

Taigi, paimkime mūsų komponentą be CSS stilių, kurį kūrėme praeitoje pamokoje:

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

Sukurkime faile App.js prieš komandą return objektą su CSS stiliais div'ui kintamajame class1. Atminkite, kad savybių pavadinimai čia rašomi camelCase notacijoje, o savybių reikšmes reikia įdėti į kabutes:

App.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center'
};

Dabar pridėkime objektą class2 su stiliais pirmajai pastraipai:

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

Objektą class3 su stiliais antrajai pastraipai:

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

Ir galiausiai class4 paskutiniajai:

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

Dabar, kad pritaikytume komponente CSS klases, naudokimės atributu style. Pirmajai pastraipai mes turėjome kintamąjį class2, perduokime jį kaip reikšmę:

App.js<p style={class2}>text</p>

Panašiu būdu pridėkime stilius iš objektų likusioms žymoms.

Galutinai, komponento kodas atrodys taip:

App.jsfunction App() {
  const class1 = {
    width: '200px',
    border: '2px solid brown',
    padding: '10px',
    textAlign: 'center',
  };

  const class2 = {
    color: 'orangered',
    fontWeight: 'bold',
  };

  const class3 = {
    fontStyle: 'italic',
    color: 'brown',
  };

  const class4 = {
    backgroundColor: 'orange',
    fontWeight: 'bold',
    color: 'white',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}