React-da style atributunda CSS stilleri ile iş

Evvelki derslerde style atributuna biz CSS stilleri olan obyekti ehtiva eden deyişeni ötürürdük. Ara deyişenden istifade etmek olmaz, obyekti birbaşa atributda yazmaq olar - bu halda bizim iki cüt qıvrım möterize lazımdır - birincisi JSX əlavəsinden, ikincisi isə obyektdən.

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

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

Məsələn, birbaşa React komponentimiz App-nin ilk abzası üçün CSS xüsusiyyetlerini yazaq:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  text
</p>

Benzer şekilde qalan teqlere de stilleri elave edek.

Netice olaraq, komponentin kodu aşağıdakı kimi görünecek:

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        text
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        text
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        text
      </p>
    </div>
  );
}