Styling s Styled Components v Reactu

V prejšnjih lekcijah smo si ogledali tehnike stiliziranja z uporabo globalnega CSS in inline stiliziranja. V tej lekciji bomo delali z bolj učinkovitim pristopom za velike aplikacije - uporabo knjižnice styled-components.

Torej, vzemimo našo komponento brez CSS stilov, ki smo jo uporabljali v prejšnjih lekcijah:

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

Za začetek namestimo knjižnico Styled Components:

terminalnpm install --save styled-components

Nato uvozimo potreben paket v komponento App:

App.jsimport styled from 'styled-components';

Zdaj lahko ovijemo oznake v style in jih uporabimo kot React komponente, vendar z stilovi, pritrjenimi direktno v JS. Ta pristop se imenuje tudi CSS v JS.

Oblikujmo prvi odstavek. Za to pred funkcijo App po uvoznih vrsticah ustvarimo komponento Text1. V objektu styled iz knjižnice potrebujemo odstavek, zato pišemo styled.p. Nato, v predlogi navedemo potrebne CSS style - kot v običajnem CSS:

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

Kot vidite, tukaj uporabljamo čist CSS v obliki predloženih nizov, kar je zelo priročno. Na podoben način lahko uporabljamo medijske poizvedbe, psevdoelemente, izbirnike in drugo funkcionalnost CSS.

Zdaj znotraj funkcije komponente App zamenjajmo oznako p z ustvarjeno komponento Text1 s CSS slogi:

App.js<Text1>text</Text1>     

Na podoben način oblikujmo drugi in tretji odstavek. Za to ustvarimo komponenti Text2 in Text3:

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

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

In končno, oblikujmo naš div. Za to ustvarimo komponento in jo poimenujmo Container:

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

Zamenjajmo vse naše oznake z ustvarjenimi komponentami:

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

Zahvaljujoč temu pristopu lahko ustvarimo večkrat uporabne komponente s slogi.

Če odprete generirano označevanje v plošči razvijalca v brskalniku, boste videli, da ima vsaka komponenta generirane svoje edinstvene razrede. Tako nam ni treba več skrbeti za konflikte med razredi posameznih komponent.

Na podoben način je mogoče stilizirati komponente, z uporabo, na primer, knjižnice Emotion.