Деректерді React-тегі объекттен style атрибутына енгізу

CSS стильдерін элементтерге style атрибуты арқылы да қосуға болады. Бұл және болашақтағы бірнеше сабақта біз инлайн стильдеу әдістерін қарастырамыз.

Енді біз styles.css файлын қоспаймыз, bunun орнына әр тег үшін стильдер объектісін style атрибутына компонент файлының ішінде тікелей жазамыз.

Сонымен, алдыңғы сабақта жасаған, CSS стильдері жоқ компонентімізді алайық:

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

App.js файлында return командасының алдында див үшін CSS стильдері бар объектті class1 айнымалысында жасайық. Есіңізде болсын, бұл жердегі қасиет атаулары camelCase нотациясымен жазылады, ал қасиет мәндері тырнақша ішінде болуы керек:

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

Енді бірінші абзац үшін стильдері бар class2 объектісін қосамыз:

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

Екінші абзац үшін стильдері бар class3 объектісі:

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

Және, ақырында, соңғысы үшін class4:

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

Енді компонентте CSS кластарын қолдану үшін, style атрибутын пайдаланамыз. Бірінші абзац үшін бізде class2 айнымалысы бар, оны мән ретінде берейік:

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

Ұқсас түрде қалған тегтер үшін объекттерден стильдерді қосамыз.

Нәтижесінде, компонент коды келесідей болады:

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>
  );
}