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:

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

Først installer vi biblioteket Styled Components:

npm install --save styled-components

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

import 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:

const 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:

<Text1>text</Text1>

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

const 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:

const 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:

import 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.

Ta React-komponenten som du lagde i oppgaven til forrige leksjon, og styl den ved å bruke biblioteket Styled Components.