Маълумотларни Reactда алохида файлдан style атрибутига қўйиш

Биз ўтган дарсдаги каби компонент файлида стил объектларини ёзмаймиз, балки стил объектларимиз билан алохида файл яратиб, уларни керакли компонентга импорт қиламиз.

Шунинг учун, CSS стилларисз компонентимизни оламиз:

App.jsfunction App() {
  return (
    <div>
      <p>матн</p>
      <p>матн</p>
      <p>матн</p>
    </div>
  );
}

src папкасида алохида styles.js файлини яратамиз, унда бизнинг стил объектларимиз ёзилади:

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 файлининг охида бизнинг объектларимизни битта объект styles сифатида экспорт қилишни унутмаймиз:

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

Энди styles объектини бизнинг компонентга импорт қиламиз:

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

Энди биз умумий styles объектидан керакли CSS стиллар объектини тегларимизга қўллаш имконига эгамиз. Биринчи абзацга class2 объектидан стилларни қўллаймиз:

App.js<p style={styles.class2}>матн</p>

Ҳудди шу тарзда қолган тегларга объектлардан стиллар қўшамиз.

Натижада, компонент коди куйидагича кўринади:

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