Stilisering met Styled Components in React

In vorige lesse het ons tegnieke vir stilisering met behulp van globaal CSS en inline-stilisering ondersoek. In hierdie les sal ons werk met 'n meer effektiewe benadering vir groot toepassings - die gebruik van die styled-components-biblioteek.

So, laat ons ons komponent sonder CSS-styling neem, wat ons in vorige lesse gebruik het:

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

Eerstens installeer ons die biblioteek Styled Components:

npm install --save styled-components

Dan voer ons die nodige pakket in die App-komponent in:

import styled from 'styled-components';

Nou kan ons etikette in style verpak en dit as React-komponente toepas, maar reeds met style reg in JS aangeheg. Hierdie benadering word ook CSS-in-JS genoem.

Kom ons styl die eerste paragraaf. Om dit te doen, skep ons 'n komponent Text1 voor die App-funksie na die invoerreëls. In die styled-objek uit die biblioteek het ons 'n paragraaf nodig, so ons skryf styled.p. Dan, in die templaatstring, lys ons die nodige CSS-style op - soos in gewone CSS:

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

Soos jy kan sien, gebruik ons hier suiwer CSS in die vorm van templaatstrings, wat baie handig is. Op soortgelyke wyse kan ons media-navrae, pseudoelemente, selekteerders en ander CSS-funksionaliteit gebruik.

Nou vervang ons die p-etikett binne die App-komponentfunksie met die komponent wat ons geskep het, Text1 met CSS-style:

<Text1>text</Text1>

Op soortgelyke wyse styl ons die tweede en derde paragrawe. Om dit te doen, skep ons komponente Text2 en Text3:

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

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

En uiteindelik styl ons ons div. Om dit te doen skep ons 'n komponent en noem dit Container:

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

Vervang al ons etikette met die geskepte komponente:

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

Danksy hierdie benadering kan ons herbruikbare komponente met style skep.

As jy die gegenereerde opmaak in die ontwikkelaarspaneel in die blaaier oopmaak, sal jy sien dat elke komponent sy eie unieke klasse gegenereer het. Dus hoef ons nie meer bekommerd te wees oor konflikte tussen klasse van individuele komponente nie.

Op soortgelyke wyse kan komponente gestileer word, deur byvoorbeeld die Emotion-biblioteek te gebruik.

Neem die React-komponent wat jy in die vorige les se taak gedoen het, en styl dit deur die Styled Components-biblioteek te gebruik.