Styling med Styled Components i React

I de foregående lektioner har vi set på metoder til styling ved hjælp af global CSS og inline-styling. I denne lektion vil vi arbejde med en mere effektiv tilgang til store applikationer - brugen af biblioteket styled-components.

Så lad os tage vores komponent uden CSS-styling, som vi brugte i de foregående lektioner:

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

Lad os først installere biblioteket Styled Components:

terminalnpm install --save styled-components

Derefter importerer vi den nødvendige pakke til komponentet App:

App.jsimport styled from 'styled-components';

Nu kan vi indpakke tags i styles og anvende dem som React-komponenter, men med styles fastgjort direkte i JS. Denne tilgang kaldes også CSS i JS.

Lad os style det første afsnit. For at gøre dette skal vi før funktionen App efter importlinjerne oprette en komponent Text1. I objektet styled fra biblioteket har vi brug for et afsnit, så vi skriver styled.p. Derefter, i skabelonstrengen, angiver vi de nødvendige CSS-styles - som i almindelig CSS:

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

Som du kan se, bruger vi ren CSS i form af skabelonstrenge, hvilket er meget praktisk. På lignende måde kan vi bruge medieforespørgsler, pseudoelementer, selektorer og anden CSS-funktionalitet.

Nu inde i funktionen for komponentet App skifter vi tagget p ud med vores oprettede komponent Text1 med CSS-styles:

App.js<Text1>text</Text1>     

På samme måde styler vi andet og tredje afsnit. For at gøre dette opretter vi komponenter 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 endelig styler vi vores div. For at gøre dette opretter vi en komponent og kalder den Container:

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

Lad os erstatte alle vores tags med de oprettede komponenter:

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

Takket være denne tilgang kan man oprette genanvendelige komponenter med styles.

Hvis du åbner den genererede opmærkning i udviklerpanelet i browseren, vil du se, at hver komponent har sine egne unikke klasser. Dermed behøver vi ikke længere bekymre os om konflikter mellem klasser fra separate komponenter.

På samme måde kan man style komponenter, ved for eksempel at bruge biblioteket Emotion.