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:

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

Lad os først installere biblioteket Styled Components:

npm install --save styled-components

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

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

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

<Text1>text</Text1>

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

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

Lad os erstatte alle vores tags med de oprettede komponenter:

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

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.

Tag React-komponentet, som du lavede i opgaven til den forrige lektion, og styl det ved at bruge biblioteket Styled Components.