Stilsetting med Styled Components i React

I tidligere leksjoner har vi sett på teknikker for stilsetting ved bruk av global CSS og inline-stilsetting. I denne leksjonen vil vi jobb med en mer effektiv tilnærming for store applikasjoner - bruk av biblioteket styled-components.

Så, la oss ta vår komponent uten CSS-stiler, som vi brukte i tidligere leksjoner:

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

Først installer vi biblioteket Styled Components:

terminalnpm install --save styled-components

Deretter importerer vi den nødvendige pakken til komponenten App:

App.jsimport styled from 'styled-components';

Nå kan vi pakke inn tagger i stiler og bruke dem som React-komponenter, men allerede med stiler knyttet direkte i JS. Denne tilnærmingen kalles også CSS i JS.

La oss style det første avsnittet. For å gjøre dette foran funksjonen App etter importlinjene oppretter vi en komponent Text1. I objektet styled fra biblioteket trenger vi et avsnitt, så vi skriver styled.p. Deretter, i malstrengen lister vi opp de nødvendige CSS-stilene - som i vanlig CSS:

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

Som du ser, bruker vi her ren CSS i form av malstrenger, noe som er veldig praktisk. På lignende måte kan vi bruke mediespørringer, pseudoelementer, selektorer og annen CSS-funksjonalitet.

Nå inne i funksjonen til komponenten App bytter vi ut taggen p med komponenten vi opprettet Text1 med CSS-stiler:

App.js<Text1>text</Text1>     

På lignende måte styler vi det andre og tredje avsnittet. For å gjøre dette oppretter vi komponentene Text2 og Text3:

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

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

Og til slutt styler vi vår div. For å gjøre dette oppretter vi en komponent og kaller den Container:

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

La oss erstatte alle våre tagger med de opprettede komponentene:

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

Takk til denne tilnærmingen kan man opprette gjenbrukbare komponenter med stiler.

Hvis du åpner den genererte koden i utviklerverktøyet i nettleseren, vil du se at hver komponent har sine egne unike klasser. Dermed trenger vi ikke lenger å bekymre oss for konflikter mellom klasser fra separate komponenter.

På lignende måte kan man style komponenter, ved for eksempel å bruke biblioteket Emotion.