Stiilide lisamine Styled Components abil Reactis

Eelmistes õppetükides vaatlesime stiilimise võtteid, kasutades globaalset CSS-i ja inline-stiilimist. Selles õppetükis töötame suuremate rakenduste jaoks tõhusama lähenemisega - teeki styled-components kasutamine.

Niisiis, võtame oma CSS-stiilideta komponendi, mida me eelmistes õppetükides kasutasime:

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

Alustuseks installime teegi Styled Components:

terminalnpm install --save styled-components

Seejärel impordime vajaliku paketi komponenti App:

App.jsimport styled from 'styled-components';

Nüüd saame silte stiilidesse mähkida ja neid kasutada kui React komponente, kuid juba JS-s otse lisatud stiilidega. Sellist lähenemist nimetatakse ka CSS JS-is.

Stylitseerime esimese lõigu. Selleks enne funktsiooni App pärast impordi stringe loome komponendi Text1. Objektist styled teekist vajame lõiku, seega kirjutame styled.p. Seejärel loetleme mallistringis vajalikud CSS-stiilid - nagu tavalises CSS-is:

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

Nagu näete, kasutame siin puhast CSS-i kujul mallistringid, mis on väga mugav. Samamoodi saame kasutada meediapäringuid, pseudoelemente, selektoreid ja muud CSS-i funktsionaalsust.

Nüüd asendame funktsiooni App sees sildi p meie loodud komponendiga Text1 CSS-stiilidega:

App.js<Text1>text</Text1>     

Samamoodi stiilime teist ja kolmandat lõiku. Selleks loome komponendid Text2 ja Text3:

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

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

Ja lõpuks stiilime meie div-i. Selleks loome komponendi ja nimetame selle Container:

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

Asendame kõik meie sildid loodud komponentidega:

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

Tänu sellisele lähenemisele saab luua mitmekordselt kasutatavaid komponente stiilidega.

Kui avate loodud veebilehe arendaja paneelis brauseris, näete, et igal komponendil on loodud oma unikaalsed klassid. Seega ei pea me enam muretsema klasside konfliktide pärast eraldi komponentide vahel.

Samamoodi saab stiilida komponente, kasutades näiteks teeki Emotion.