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

Podemos evitar escribir objetos con estilos en el archivo del componente, como en la lección anterior, y crear un archivo separado con nuestros objetos de estilos e importarlos en el componente necesario.

Entonces, tomemos nuestro componente sin estilos CSS:

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

Creemos en la carpeta src un archivo separado styles.js, en el cual escribiremos nuestros objetos con estilos:

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',
};

No olvidemos al final del archivo styles.js exportar nuestros objetos como un objeto styles:

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

Ahora importemos el objeto styles en nuestro componente:

import { styles } from "./styles";

Ahora podemos aplicar el objeto de estilos CSS que necesitemos desde el objeto general styles a nuestras etiquetas. Apliquemos al primer párrafo los estilos del objeto class2:

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

De manera similar agreguemos estilos desde los objetos restantes a las demás etiquetas.

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

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

Tome el componente React que hizo en la tarea de la lección anterior. Cree un archivo separado styles.js, en el cual estarán los objetos de estilos CSS para sus etiquetas, exportelos como un objeto, aplique los estilos a su componente React.