Andmete sisestamine style atribuuti eraldi failist Reactis

Me ei pea kirjutama stiilide objekte komponendi failis, nagu eelmises õppetükis, vaid võime luua eraldi faili meie stiilide objektidega ja importida need vajalikku komponenti.

Niisiis, võtame oma komponendi ilma CSS stiilideta:

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

Loome kaustas src eraldi faili styles.js, milles kirjutame oma stiilide objektid:

styles.jsconst 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',
};

Ärge unustage faili styles.js lõpus eksportida meie objektid ühe objektina styles:

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

Nüüd importime objekti styles meie komponenti:

App.jsimport { styles } from "./styles";       

Nüüd saame rakendada vajalikku objekti CSS stiilidega üldisest objektist styles meie siltidele. Rakendame esimesele lõigule stiilid objektist class2:

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

Samamoodi lisame stiilid objektidest ülejäänud siltidele.

Tulemusena näeb komponendi kood välja järgmine:

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