Styled Components-ի միջոցով ոճավորում React-ում

Նախորդ դասերում մենք դիտարկեցինք գլոբալ CSS-ի և ինլայն ոճավորման օգտագործմամբ ոճավորման մեթոդները: Այս դասում մենք կաշխատենք ավելի արդյունավետ մեթոդի հետ մեծ հավելվածների համար - styled-components գրադարանի օգտագործումը:

Այսպիսով, վերցնենք մեր CSS ոճերից զուրկ կոմպոնենտը, որը մենք օգտագործել ենք նախորդ դասերում.

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

Սկսելու համար տեղադրենք Styled Components գրադարանը.

terminalnpm install --save styled-components

Այնուհետև անհրաժեշտ պակեթը իմպորտավորենք App կոմպոնենտ.

App.jsimport styled from 'styled-components';

Այժմ մենք կարող ենք պիտակները փաթաթել ոճերի մեջ և օգտագործել դրանք որպես React կոմպոնենտներ, բայց արդեն JS-ում ուղղակիորեն կցված ոճերով: Այս մոտեցումը կոչվում է նաև CSS in JS:

Եկեք ոճավորենք առաջին պարբերությունը: Դրա համար App ֆունկցիայից առաջ, իմպորտների տողերից հետո ստեղծենք Text1 կոմպոնենտը: Գրադարանից styled օբյեկտում մեզ անհրաժեշտ է պարբերություն, ուստի գրում ենք styled.p: Այնուհետև, տեմպլատային տողում թվարկում ենք մեզ անհրաժեշտ CSS ոճերը - ինչպես սովորական CSS-ում.

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

Ինչպես տեսնում եք, մենք այստեղ օգտագործում ենք մաքուր CSS տեմպլատային տողերի տեսքով, ինչը շատ հարմար է: Նմանապես մենք կարող ենք օգտագործել մեդիա հարցումներ, կեղծ տարրեր, ընտրիչներ և CSS-ի այլ ֆունկցիոնալություն:

Այժմ App կոմպոնենտի ֆունկցիայի ներսում փոխարինենք p պիտակը մեր ստեղծած կոմպոնենտով Text1 CSS ոճերով.

App.js<Text1>text</Text1>     

Նմանապես ոճավորենք երկրորդ և երրորդ պարբերությունները: Դրա համար ստեղծենք Text2 և Text3 կոմպոնենտները.

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

Եվ, վերջապես, ոճավորենք մեր div-ը: Դրա համար կստեղծենք կոմպոնենտ և կանվանենք այն Container.

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

Փոխարինենք մեր բոլոր պիտակները ստեղծված կոմպոնենտներով.

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>text</Text1>
      <Text2>text</Text2>
      <Text3>text</Text3>
    </Container>
  );
}

Այս մոտեցման շնորհիվ կարելի է ստեղծել բազմակի օգտագործման համար նախատեսված կոմպոնենտներ ոճերով:

Եթե բրաուզերում դեվելոպերների վահանակում բացեք գեներացված վերտը, ապա կտեսնեք, որ յուրաքանչյուր կոմպոնենտի համար գեներացված են իրենց եզակի դասերը: Այսպիսով, մեզ այլևս կարիք չկա անհանգստանալ առանձին կոմպոնենտների դասերի միջև կոնֆլիկտների մասին:

Նմանապես կարելի է ոճավորել կոմպոնենտները, օգտագործելով, օրինակ, Emotion գրադարանը: