Stylizavimas naudojant Styled Components React'e

Ankstesnėse pamokose mes nagrinėjome stiliaus taikymo metodus naudojant globalų CSS ir inline stiliaus taikymą. Šioje pamokoje mes dirbsime su efektyvesniu didelėse programose požiūriu - naudojant styled-components biblioteką.

Taigi, paimkime mūsų komponentą be CSS stilių, kurį mes naudojome ankstesnėse pamokose:

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

Pirmiausia įdiegsime biblioteką Styled Components:

terminalnpm install --save styled-components

Tada importuokime mums reikalingą paketą į komponentą App:

App.jsimport styled from 'styled-components';

Dabar mes galime apgaubti žymes stiliais ir naudoti jas kaip React komponentus, bet jau su prie JS pritvirtintais stiliais. Šis požiūris dar vadinamas CSS in JS.

Išstilizuokime pirmą pastraipą. Tam prieš funkciją App po importo eilučių sukurkime komponentą Text1. Objekte styled iš bibliotekos mums reikia pastraipos, todėl mes rašome styled.p. Tada, šabloninėje eilutėje išvardiname reikalingus mums CSS stilius - kaip įprastame CSS:

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

Kaip matote, mes čia naudojame gryną CSS pavidalu šabloninių eilučių, kas yra labai patogu. Panašiai mes galime naudoti media užklausas, pseudoelementus, selektorius ir kitą CSS funkcionalumą.

Dabar funkcijos komponento App viduje pakeiskime žymę p mūsų sukurtu komponentu Text1 su CSS stiliais:

App.js<Text1>text</Text1>     

Panašiai išstilizuokime antrą ir trečią pastraipas. Tam sukurkime komponentus Text2 ir Text3:

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

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

Ir, galiausiai, išstilizuokime mūsų div. Tam sukurkime komponentą ir pavadinkime jį Container:

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

Pakeiskime visas mūsų žymes sukurtais komponentais:

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

Dėl šio požiūrio galima kurti daugkartinio naudojimo komponentus su stiliais.

Jei atversite sugeneruotą žymėjimą kūrėjo skydelyje naršyklėje, tai pamatysite, kad kiekvienas komponentas turi savo unikalias klases. Taigi, mums nebereikia jaudintis dėl konfliktų tarp atskirų komponentų klasių.

Panašiai galima stilizuoti komponentus, naudojant, pavyzdžiui, biblioteką Emotion.