Стылізацыя з дапамогай 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 у 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;
`;

І, нарэшце, стылізуем наш дыў. Для гэтага створым кампанент і назовем яго 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.