Kuingiza Data Katika Sifa ya style Kutoka kwa Vigezo katika React

Katika somo lililopita tuliandika kitu moja kwa moja kwenye sifa style. Tunaweza pia kutumia kuingiza data kwenye kitu hicho kutoka kwa vigezo.

Wacha tuchukue kijenzi chetu cha React bila mitindo ya CSS:

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

Sasa tutaunda vigezo na tuwape thamani za sifa za CSS. Tuanze kwa mpangilio na mitindo ya div.

Katika faili ya kijenzi kabla ya amri ya return tuunde kigezo wd1 na tupe thamani '200px':

App.jsconst wd1 = '200px';

Kwa njia sawa tuunde vigezo kwa thamani zote za sifa za div yetu:

App.jsconst wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Sasa tuongeze vigezo kwa aya ya kwanza:

App.jsconst co1 = 'orangered';
const fw1 = 'bold';

Kwa aya ya pili:

App.jsconst fs1 = 'italic';
const co2 = 'brown';

Na, mwishowe, kwa ya mwisho. Hapa itahitaji mbili tu, na si tatu vigezo. Haina maana kurudia, kwani thamani bold tayari tunayo kwa aya ya kwanza:

App.jsconst bco1 = 'orange';
const co3 = 'white';

Sasa tutaweka vigezo vilivyo na thamani za mitindo. Wacha, tufanye hivyo kwa aya ya kwanza. Tuingize vigezo co1 na fw1 badala ya thamani kwenye kitu:

App.js<p style = {{ color: co1, fontWeight: fw1 }}>
  nakala
</p>

Kwa njia sawa tufanye na viti vingine.

Matokeo yake, msimbo wetu wa kijenzi utaonekana kama hii:

App.jsfunction App() {
  const wd1 = '200px';
  const br1 = '2px solid brown';
  const pd1 = '10px';
  const ta1 = 'center';

  const co1 = 'orangered';
  const fw1 = 'bold';

  const fs1 = 'italic';
  const co2 = 'brown';
  
  const bco1 = 'orange';
  const co3 = 'white';

  return (
    <div style = {{
      width: wd1,
      border: br1,
      padding: pd1,
      textAlign: ta1 }}>
      <p style = {{ color: co1, fontWeight: fw1 }}>
        nakala
      </p>
      <p style = {{ fontStyle: fs1, color: co2 }}>
        nakala
      </p>
      <p style = {{ 
        backgroundColor: bco1,
        fontWeight: fw1,
        color: co3 }}>
        nakala
      </p>
    </div>
  );
}