Werk met CSS style in die style attribuut in React

In vorige lesse het ons 'n veranderlike wat 'n voorwerp met CSS style bevat oorgedra na die attribuut style. Jy kan die tussenveranderlike weglat en die voorwerp reguit in die attribuut skryf - in hierdie geval het ons twee paar krulhakes nodig - die eerste een vir die JSX inskrywing, en die tweede een vir die voorwerp.

So, kom ons neem ons komponent sonder CSS style:

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

Byvoorbeeld, laat ons direk CSS eienskappe vir die eerste paragraaf van ons React komponent App inskryf:

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	text
</p>

Voeg op 'n soortgelyke manier style by vir die res van die etikette.

As gevolg hiervan sal die komponent se kode soos volg lyk:

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

Neem die React komponent wat jy in die vorige les se taak gemaak het. Voeg style by elke etiket reguit in die attribuut style, soos in hierdie les gewys.