Styling met Styled Components in React

In eerdere lessen hebben we technieken bekeken voor styling met behulp van globale CSS en inline styling. In deze les gaan we werken met een meer effectieve aanpak voor grote applicaties - het gebruik van de bibliotheek styled-components.

Laten we dus onze component zonder CSS styling nemen, die we in eerdere lessen hebben gebruikt:

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

Laten we eerst de bibliotheek Styled Components installeren:

terminalnpm install --save styled-components

Vervolgens importeren we het benodigde package in de component App:

App.jsimport styled from 'styled-components';

Nu kunnen we tags in stijlen verpakken en ze toepassen als React componenten, maar nu met stijlen direct in JS gekoppeld. Deze aanpak wordt ook wel CSS in JS genoemd.

Laten we de eerste alinea stylen. Hiervoor maken we vóór de functie App, na de import regels, een component Text1 aan. In het object styled uit de bibliotheek hebben we een alinea nodig, dus we schrijven styled.p. Vervolgens, in de template string, enumereren we de benodigde CSS stijlen - zoals in gewone CSS:

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

Zoals je ziet, gebruiken we hier pure CSS in de vorm van template strings, wat erg handig is. Op een vergelijkbare manier kunnen we media queries, pseudo-elementen, selectors en andere CSS functionaliteit gebruiken.

Nu vervangen we binnen de functie van component App de tag p door onze gemaakte component Text1 met CSS stijlen:

App.js<Text1>text</Text1>     

Op een vergelijkbare manier stylen we de tweede en derde alinea. Hiervoor maken we componenten Text2 en Text3:

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

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

En tenslotte, stylen we onze div. Hiervoor maken we een component en noemen het Container:

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

Laten we al onze tags vervangen door de gemaakte componenten:

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

Dankzij deze aanpak kunnen we herbruikbare componenten met stijlen creëren.

Als je de gegenereerde markup opent in het ontwikkelaarspaneel in de browser, dan zie je dat bij elke component zijn eigen unieke klassen zijn gegenereerd. Zo hoeven we ons geen zorgen meer te maken over conflicten tussen klassen van afzonderlijke componenten.

Op een vergelijkbare manier kunnen componenten worden gestyled, met behulp van, bijvoorbeeld, de bibliotheek Emotion.