Trabajo con estilos CSS en el atributo style en React

En lecciones anteriores, en el atributo style pasábamos una variable que contenía un objeto con estilos CSS. Se puede evitar el uso de una variable intermedia y describir el objeto directamente en el atributo - en este caso necesitamos dos pares de llaves - el primero para la inserción JSX y el segundo - para el objeto.

Entonces, tomemos nuestro componente sin estilos CSS:

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

Por ejemplo, escribamos directamente las propiedades CSS para el primer párrafo de nuestro componente React App:

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

De manera similar, agreguemos estilos para las demás etiquetas.

Como resultado, el código del componente se verá de la siguiente manera:

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

Tome el componente React que hizo en la tarea de la lección anterior. Agregue estilos a cada etiqueta directamente en el atributo style, como se muestra en esta lección.