Styling kwa kutumia Styled Components katika React

Katika masomo yaliyopita tulichunguza mbinu za kuweka mitindo kwa kutumia CSS ya ulimwengu na mitindo ya ndani ya mstari. Katika somo hili, tutafanya kazi na mbinu bora zaidi kwa programu kubwa - kutumia maktaba ya styled-components.

Kwa hiyo, tuchukue kipengele chetu bila mitindo ya CSS, ambacho tulitumia katika masomo yaliyopita:

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

Kuanza kabisa, tunachukua maktaba Styled Components:

npm install --save styled-components

Kisha, tunaleta kifurushi kinachohitajika ndani ya kipengele App:

import styled from 'styled-components';

Sasa tunaweza kufunga vitambulisho ndani ya mitindo na kuvitumia kama vipengele vya React, lakini ikiwa na mitindo iliyowekwa moja kwa moja kwenye JS. Mbinu hii pia huitwa CSS ndani ya JS.

Wacha tuweke mtindo kwa aya ya kwanza. Kwa hili kabla ya kitendo App baada ya mistari ya kuleta tunaunda kipengele Text1. Katika kitu styled kutoka kwenye maktaba tunahitaji aya, kwa hivyo tunaandika styled.p. Kisha, kwenye mfumo wa ufunguo wa mfumo tunaorodha yale yaliyo CSS inayohitajika mitindo - kama katika CSS ya kawaida:

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

Kama unavyoona, tunatumia CSS safi hapa kwa namna ya mfumo wa ufunguo wa mfumo, ambayo ni rahisi sana. Kwa njia ile ile tunaweza kutumia maswali ya media, vipengele vya uwongo, wachaguzi na utendakazi mwingine wa CSS.

Sasa ndani ya kitendo cha kipengele App tunabadilisha kitambulisho p na kipengele tulichochunda Text1 na mitindo ya CSS:

<Text1>nakala</Text1>

Kwa njia ile ile tunaweka mtindo aya ya pili na ya tatu. Kwa hili tunaunda vipengele Text2 na Text3:

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

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

Na, hatimaye, tunaweka mtindo kivuli chetu. Kwa hili tunaunda kipengele na tukaiite Container:

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

Tunabadilisha vitambulisho vyetu vyote vilivyoundwa vipengele:

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>nakala</Text1>
			<Text2>nakala</Text2>
			<Text3>nakala</Text3>
		</Container>
	);
}

Shukrani kwa mbinu kama hii inaweza kuunda vilivyotumika mara kwa mara vipengele vyenye mitindo.

Kama utafungua usanidi wa wavuti uliotengenezwa kwenye paneli ya msanidi programu kwenye kivinjari, basi utaona kuwa kila kipengele kimetengenezwa kwa pekee matabaka. Kwa hivyo, hatuhitaji tena kuwa na wasiwasi kuhusu migogoro kati ya matabaka ya vipengele tofauti.

Kwa njia ile ile inaweza kuwekwa mtindo kwa vipengele, kwa kutumia, kwa mfano, maktaba ya Emotion.

Chukua kipengele cha React ambacho ulifanya kwenye kazi ya somo lililopita, uweke mtindo, ukitumia maktaba ya Styled Components.