Kufanya kazi na mitindo ya CSS katika style attribute katika React

Katika masomo yaliyopita katika style attribute style tulipitisha variable iliyo na kitu na mitindo ya CSS. Inawezekana kutotumia variable ya kati, na kuandika kitu moja kwa moja katika attribute - katika kesi hii tunahitaji miraba miwili ya braces - ya kwanza kutoka kwa JSX insertion, na ya pili - kutoka kwa kitu.

Kwa hivyo, tuchukue komponenti yetu ya React bila mitindo ya CSS:

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

Kwa mfano, tuandike moja kwa moja CSS properties kwa aya ya kwanza ya komponenti yetu ya React App:

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

Kwa njia sawa ongeza mitindo kwa tags zingine.

Kama matokeo, msimbo wa komponenti utakuwa inaonekana kama ifuatavyo:

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