Tyylittely Styled Components -kirjastolla Reactissa

Edellisissä oppitunneissa tarkastelimme tyylittelymenetelmiä käyttämällä globaalia CSS:ää ja inline-tyylittelyä. Tässä oppitunnissa työskentelemme tehokkaamman lähestymistavan kanssa suurissa sovelluksissa - styled-components-kirjaston käytön.

Joten otetaan CSS-tyylejä vailla oleva komponenttimme, jota käytimme aiemmissa oppitunneissa:

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

Aluksi asennamme kirjaston Styled Components:

terminalnpm install --save styled-components

Sitten tuomme tarvittavan paketin komponenttiin App:

App.jsimport styled from 'styled-components';

Nyt voimme kääriä tunnisteet tyyleihin ja käyttää niitä React-komponentteina, mutta nyt suoraan JS:ään liitetyillä tyyleillä. Tätä lähestymistapaa kutsutaan myös CSS:äksi JS:ssä.

Tyylitellään ensimmäinen kappale. Tätä varten ennen App-funktiota tuontirivien jälkeen luomme komponentin Text1. Kirjaston styled-objektista tarvitsemme kappaleen, jonka vuoksi kirjoitamme styled.p. Sitten, mallimerkkijonossa luettelemme tarvittavat CSS-tyylit - kuten tavallisessa CSS:ssä:

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

Kuten näette, käytämme täällä puhdasta CSS:ää mallimerkkijonoina, mikä on erittäin kätevää. Samalla tavalla voimme käyttää media-kyselyitä, pseudoelementtejä, valitsimia ja muuta CSS-toiminnallisuutta.

Nyt App-komponentin funktion sisällä korvaamme p-tunnisteen luomallamme komponentilla Text1 CSS-tyyleillä:

App.js<Text1>text</Text1>     

Samalla tavalla tyylitellään toinen ja kolmas kappale. Tätä varten luomme komponentit 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;
`;

Lopuksi tyylitellään meidän div. Tätä varten luomme komponentin ja nimeämme sen Container:ksi:

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

Korvaamme kaikki tunnisteet luoduilla komponenteilla:

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ämän lähestymistavan ansiosta voidaan luoda uudelleenkäytettäviä komponentteja tyyleillä.

Jos avaat generoidun verkkosivun rakenteen selaimen kehittäjäpaneelissa, näet, että jokaisella komponentilla on generoitu omat uniikit luokat. Näin meidän ei tarvitse enää huolehtia luokkien välisistä ristiriidoista yksittäisten komponenttien välillä.

Samalla tavalla voidaan tyylittää komponentteja, käyttämällä esimerkiksi Emotion-kirjastoa.