Εισαγωγή δεδομένων στο χαρακτηριστικό style από αντικείμενο στο React

Τα CSS στυλ μπορούν επίσης να προστεθούν στα στοιχεία χρησιμοποιώντας το χαρακτηριστικό style. Σε αυτό και στα επόμενα μαθήματα θα εξετάσουμε μεθόδους ενσωματωμένης στυλιστικής.

Τώρα δεν θα συνδέσουμε το αρχείο styles.css, αλλά θα μεταφέρουμε τις αντίστοιχες τιμές στο χαρακτηριστικό style ως αντικείμενο με στυλ για κάθε ετικέτα, τα οποία θα γράφουμε απευθείας στο αρχείο του στοιχείου.

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

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

Ας δημιουργήσουμε στο αρχείο App.js πριν από την εντολή return ένα αντικείμενο με CSS στυλ για το div σε μια μεταβλητή class1. Θυμηθείτε ότι τα ονόματα των ιδιοτήτων εδώ γράφονται σε camelCase σημειογραφία, και οι τιμές των ιδιοτήτων πρέπει να περικλείονται σε εισαγωγικά:

const class1 = {
	width: '200px',
	border: '2px solid brown',
	padding: '10px',
	textAlign: 'center'
};

Τώρα ας προσθέσουμε το αντικείμενο class2 με στυλ για την πρώτη παράγραφο:

const class2 = {
	color: 'orangered',
	fontWeight: 'bold'
}

Το αντικείμενο class3 με στυλ για τη δεύτερη παράγραφο:

const class3 = {
	fontStyle: 'italic',
	color: 'brown',
}

Και τέλος, το class4 για την τελευταία:

const class4 = {
	backgroundColor: 'orange',
	fontWeight: 'bold',
	color: 'white',
}

Τώρα, για να εφαρμόσουμε στο στοιχείο τις CSS κλάσεις, θα χρησιμοποιήσουμε το χαρακτηριστικό style. Για την πρώτη παράγραφο είχαμε τη μεταβλητή class2, ας την περάσουμε ως τιμή:

<p style={class2}>text</p>

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

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

function App() {
	const class1 = {
		width: '200px',
		border: '2px solid brown',
		padding: '10px',
		textAlign: 'center',
	};

	const class2 = {
		color: 'orangered',
		fontWeight: 'bold',
	};

	const class3 = {
		fontStyle: 'italic',
		color: 'brown',
	};

	const class4 = {
		backgroundColor: 'orange',
		fontWeight: 'bold',
		color: 'white',
	};

	return (
		<div style={class1}>
			<p style={class2}>text</p>
			<p style={class3}>text</p>
			<p style={class4}>text</p>
		</div>
	);
}

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