Stilizēšana ar Styled Components React

Iepriekšējās nodarbībās mēs apskatījām stilizēšanas paņēmienus, izmantojot globālo CSS un inlaino stilizēšanu. Šajā nodarbībā mēs strādāsim ar efektīvāku pieeju lielām lietotnēm - Styled Components bibliotēkas izmantošanu.

Tātad, ņemsim mūsu komponentu bez CSS stiliem, ko mēs izmantojām iepriekšējās nodarbībās:

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

Vispirms instalēsim bibliotēku Styled Components:

terminalnpm install --save styled-components

Pēc tam importēsim nepieciešamo pakotni komponentē App:

App.jsimport styled from 'styled-components';

Tagad mēs varam ietvert atzīmes stilos un izmantot tās kā React komponentes, bet jau ar pievienotiem stiliem tieši JS. Šo pieeju sauc arī par CSS in JS.

Iestilizēsim pirmo rindkopu. Priekš šī pirms funkcijas App pēc importa rindām izveidosim komponenti Text1. Objektā styled no bibliotēkas mums vajag rindkopu, tāpēc mēs rakstām styled.p. Pēc tam, veidnes virknē uzskaitām nepieciešamos CSS stilus - kā parastā CSS:

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

Kā redzat, mēs šeit izmantojam tīru CSS veidā veidnes virknes, kas ir ļoti ērti. Līdzīgi mēs varam izmantot mediju vaicājumus, pseidoelementus, selektorus un citu CSS funkcionalitāti.

Tagad funkcijas komponenta App iekšpusē aizstāsim atzīmi p ar mūsu izveidoto komponenti Text1 ar CSS stiliem:

App.js<Text1>text</Text1>     

Līdzīgi iestilizēsim otro un trešo rindkopu. Priekš šī izveidosim komponentes Text2 un Text3:

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

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

Un, beidzot, iestilizēsim mūsu div. Priekš šī izveidosim komponenti un nosauksim to par Container:

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

Aizstāsim visas mūsu atzīmes ar izveidotajām komponentēm:

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

Pateicoties šādai pieejai var izveidot daudzkārtīgi lietojamas komponentes ar stiliem.

Ja atvērsiet ģenerēto izkārtojumu izstrādātāju panelī pārlūkprogrammā, tad redzēsiet, ka katrai komponentei ir ģenerēti savi unikālie klasi. Tādējādi mums vairs nav jāuztraucas par konfliktiem starp atsevišķu komponenšu klasēm.

Līdzīgi var stilizēt komponentes, izmantojot, piemēram, bibliotēku Emotion.