Стилизација помоћу 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>
  );
}

Захваљујући овом приступу могуће је креирати вишеструко употребљиве компоненте са стиловима.

Ако отворите генерисани HTML у панелу програмера у прегледачу, видећете да је код сваке компоненте генерисана своја јединствена класа. На тај начин, више не морамо да бринемо о конфликтима између класа појединачних компоненти.

На сличан начин могуће је стилизовати компоненте, користећи, на пример, библиотеку Emotion.