Εργασία με CSS στυλ στο χαρακτηριστικό style στο React

Στα προηγούμενα μαθήματα, στο χαρακτηριστικό style περνάσαμε μια μεταβλητή που περιείχε ένα αντικείμενο με CSS στυλ. Μπορείτε να μην χρησιμοποιήσετε ενδιάμεση μεταβλητή, αλλά να γράψετε το αντικείμενο απευθείας στο χαρακτηριστικό - σε αυτήν την περίπτωση χρειαζόμαστε δύο ζευγάρι αγκύλες - η πρώτη για την JSX προσθήκη, και η δεύτερη - για το αντικείμενο.

Λοιπόν, ας πάρουμε το στοιχείο μας χωρίς CSS στυλ:

function App() {
	return (
		<div>
			<p>κείμενο</p>
			<p>κείμενο</p>
			<p>κείμενο</p>
		</div>
	);
}

Για παράδειγμα, ας ορίσουμε απευθείας τις CSS ιδιότητες για την πρώτη παράγραφο του στοιχείου React μας App:

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	κείμενο
</p>

Παρόμοια, θα προσθέσουμε στυλ για τις υπόλοιπες ετικέτες.

Ως αποτέλεσμα, ο κώδικας του στοιχείου θα μοιάζει ως εξής:

function App() {
	return (
		<div style = {{
			width: '200px',
			border: '2px solid brown',
			padding: '10px',
			textAlign: 'center' }}>
			<p style={{
				color: 'orangered',
				fontWeight: 'bold' }}>
				κείμενο
			</p>
			<p style = {{
				fontStyle: 'brown',
				color: 'brown' }}>
				κείμενο
			</p>
			<p style = {{
				backgroundColor: 'orange',
				fontWeight: 'bold',
				color: 'white' }}>
				κείμενο
			</p>
		</div>
	);
}

Πάρτε το στοιχείο React που φτιάξατε στην άσκηση του προηγούμενου μαθήματος. Προσθέστε στυλ σε κάθε ετικέτα απευθείας στο χαρακτηριστικό style, όπως φαίνεται σε αυτό το μάθημα.