Inserción de datos en el atributo style desde un objeto en React

Los estilos CSS también se pueden agregar a los elementos usando el atributo style. En esta y en las próximas lecciones, exploraremos métodos de estilizado en línea.

Ahora no conectaremos el archivo styles.css, sino que pasaremos los valores correspondientes al atributo style en forma de objeto con estilos para cada etiqueta, los cuales escribiremos directamente en el archivo del componente.

Entonces, tomemos nuestro componente sin estilos CSS, que creamos en la lección anterior:

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

En el archivo App.js, antes del comando return, creemos un objeto con estilos CSS para el div en la variable class1. Recuerda que los nombres de las propiedades aquí se escriben en notación camelCase y los valores de las propiedades deben estar entre comillas:

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

Ahora agreguemos el objeto class2 con estilos para el primer párrafo:

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

El objeto class3 con estilos para el segundo párrafo:

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

Y finalmente class4 para el último:

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

Ahora, para aplicar en el componente las clases CSS, usaremos el atributo style. Para el primer párrafo teníamos la variable class2, pasémosla como valor:

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

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

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

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

Tome el componente React que hizo en la tarea de la lección anterior, cree objetos con estilos CSS para sus etiquetas, colóquelos en los atributos style correspondientes.