React-da aýratyn faýldan style atributyna maglumat goýbermek

Biz komponent faýlynda ýaly stillar obýektlerini ýazmaýarys, özümiziň stil obýektlerimiz bilen aýratyn faýl döredip, olary gerekli komponente import edip bileris.

Şeýlelik bilen, CSS stillary bolmadyk komponentimizi alyň:

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

Geliň, src papkasyna aýratyn styles.js faýly döreteliň we içinde stil obýektlerimizi ýazalyň:

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

styles.js faýlynyň aşagynda bizim obýektlerimizi bir styles obýekti hökmünde eksport etmegi ýatdan çykarmaly däl:

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

Indi styles obýektini komponentimize import edeliň:

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

Indi biz gerek bolan CSS stil obýektini umumy styles obýektinden taglarymyza ulanyp bileris. Biriniň abzasyna class2 obýektinden stillary ulanýarys:

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

Şuňa meňzeş ýagdaýda galan taglara obýektlerden stillary goşuň.

Netijede, komponentiň kody aşakdaky görnüşde bolar:

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