Στυλιστική με Styled Components στο React

Στα προηγούμενα μαθήματα εξετάσαμε τεχνικές στυλιστικής χρησιμοποιώντας καθολικό CSS και inline στυλ. Σε αυτό το μάθημα, θα δουλέψουμε με μια πιο αποτελεσματική προσέγγιση για μεγάλες εφαρμογές - τη χρήση της βιβλιοθήκης styled-components.

Λοιπόν, ας πάρουμε το component μας χωρίς CSS στυλ, που χρησιμοποιήσαμε σε προηγούμενα μαθήματα:

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

Για να ξεκινήσουμε, ας εγκαταστήσουμε τη βιβλιοθήκη Styled Components:

npm install --save styled-components

Στη συνέχεια, εισάγουμε το απαραίτητο πακέτο στο component App:

import styled from 'styled-components';

Τώρα μπορούμε να τυλίγουμε τις ετικέτες σε στυλ και να τις εφαρμόζουμε ως React components, αλλά με στυλ attached απευθείας στο JS. Αυτή η προσέγγιση ονομάζεται επίσης CSS in JS.

Ας στυλιάρουμε την πρώτη παράγραφο. Για αυτό πριν από τη συνάρτηση App μετά τις γραμμές εισαγωγής δημιουργούμε ένα component Text1. Στο αντικείμενο styled από τη βιβλιοθήκη χρειαζόμαστε μια παράγραφο, οπότε γράφουμε styled.p. Στη συνέχεια, στη template string απαριθμούμε τα απαραίτητα CSS στυλ - όπως στο κανονικό CSS:

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

Όπως βλέπετε, χρησιμοποιούμε εδώ καθαρό CSS σε μορφή template strings, που είναι πολύ βολικό. Με παρόμοιο τρόπο μπορούμε να χρησιμοποιήσουμε media queries, pseudo-elements, selectors και άλλη λειτουργικότητα CSS.

Τώρα μέσα στη συνάρτηση του component App αντικαθιστούμε την ετικέτα p με το component Text1 που δημιουργήσαμε με CSS στυλ:

<Text1>text</Text1>

Με παρόμοιο τρόπο στυλιάρουμε τη δεύτερη και τρίτη παράγραφο. Για αυτό δημιουργούμε components Text2 και Text3:

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

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

Και, τέλος, στυλιάρουμε το div μας. Για αυτό δημιουργούμε ένα component και το ονομάζουμε Container:

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

Αντικαθιστούμε όλες τις ετικέτες μας με τα components που δημιουργήσαμε:

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

Χάρη σε αυτήν την προσέγγιση μπορούμε να δημιουργούμε επαναχρησιμοποιήσιμα components με στυλ.

Εάν ανοίξετε το generated markup στο πλαίσιο προγραμματιστή στο browser, θα δείτε ότι κάθε component έχει generated τα δικά του μοναδικά classes. Έτσι, δεν χρειάζεται πλέον να ανησυχούμε για conflicts μεταξύ classes μεμονωμένων components.

Με παρόμοιο τρόπο μπορούμε να στυλιάρουμε components, χρησιμοποιώντας, για παράδειγμα, τη βιβλιοθήκη Emotion.

Πάρτε το React component που φτιάξατε στην άσκηση του προηγούμενου μαθήματος, στυλιάρετέ το, χρησιμοποιώντας τη βιβλιοθήκη Styled Components.