Styling med Styled Components i React

I tidigare lektioner har vi tittat på metoder för styling med global CSS och inlinestyling. I den här lektionen kommer vi att arbeta med ett mer effektivt tillvägagångssätt för större applikationer - användning av biblioteket styled-components.

Så, låt oss ta vår komponent utan CSS-stilar, som vi använde i de föregående lektionerna:

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

Först installerar vi biblioteket Styled Components:

npm install --save styled-components

Sedan importerar vi det nödvändiga paketet till komponenten App:

import styled from 'styled-components';

Nu kan vi slå in taggar i stilar och använda dem som React-komponenter, men redan med stilar kopplade direkt i JS. Detta tillvägagångssätt kallas också CSS i JS.

Låt oss styla det första stycket. För att göra detta, innan funktionen App efter importraderna skapar vi en komponent Text1. I objektet styled från biblioteket behöver vi ett stycke, så vi skriver styled.p. Sedan, i mallsträngen listar vi de nödvändiga CSS-stilarna - som i vanlig CSS:

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

Som du ser använder vi här ren CSS i form av mallsträngar, vilket är mycket bekvämt. På liknande sätt kan vi använda media queries, pseudoelement, selektorer och annan CSS-funktionalitet.

Nu inuti funktionen för komponenten App byter vi ut taggen p mot vår skapade komponent Text1 med CSS-stilar:

<Text1>text</Text1>

På liknande sätt stylar vi det andra och tredje stycket. För att göra detta skapar vi komponenterna Text2 och Text3:

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

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

Och slutligen stylar vi vår div. För att göra detta skapar vi en komponent och kallar den Container:

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

Låt oss byta ut alla våra taggar mot de skapade komponenterna:

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

Tack vare detta tillvägagångssätt kan man skapa återanvändbara komponenter med stilar.

Om du öppnar den genererade koden i utvecklarpanelen i webbläsaren kommer du att se att varje komponent har genererat sina egna unika klasser. Således behöver vi inte längre oroa oss för konflikter mellan klasser från separata komponenter.

På liknande sätt kan man styla komponenter, genom att använda, till exempel, biblioteket Emotion.

Ta React-komponenten som du gjorde i uppgiften till föregående lektion, styla den med hjälp av biblioteket Styled Components.