Məlumatların React-də ayrı fayldan style atributuna daxil edilməsi

Biz stil obyektlərini əvvəlki dərsdə olduğu kimi komponent faylında yazmaya bilərik, əvəzində stil obyektlərimiz olan ayrı bir fayl yarada və onları lazımi komponentə idxal edə bilərik.

Beləliklə, CSS stili olmayan komponentimizi götürək:

App.jsfunction App() {
  return (
    <div>
      <p>mətn</p>
      <p>mətn</p>
      <p>mətn</p>
    </div>
  );
}

Gəlin src qovluğunda ayrı bir styles.js faylı yaradaq, icərisə stil obyektlərimizi yazaq:

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 faylının aşağısında obyektlərimizi bir styles obyekti kimi ixrac etməyi unutmayaq:

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

İndi styles obyektini komponentimizə idxal edək:

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

İndi biz teqlərimizə ümumi styles obyektindən lazım olan CSS stil obyektini tətbiq edə bilərik. Birinci abzasa class2 obyektindən stil tətbiq edək:

App.js<p style={styles.class2}>mətn</p>

Qalan teqlərə də obyektlərdən stiləri oxşar şəkildə əlavə edək.

Nəticədə, komponentin kodu aşağıdakı kimi olacaq:

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