Inserindo dados no atributo style a partir de um objeto em React

Os estilos CSS também podem ser adicionados aos elementos usando o atributo style. Nesta e nas próximas lições, vamos explorar métodos de estilização inline.

Agora, não vamos conectar o arquivo styles.css, mas vamos passar os valores correspondentes para o atributo style na forma de um objeto com estilos para cada tag, que escreveremos diretamente no arquivo do componente.

Então, vamos pegar nosso componente sem estilos CSS, que fizemos na lição anterior:

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

Vamos no arquivo App.js, antes do comando return, criar um objeto com estilos CSS para a div na variável class1. Lembre-se de que os nomes das propriedades aqui são escritos em camelCase e os valores das propriedades precisam estar entre aspas:

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

Agora, vamos adicionar o objeto class2 com estilos para o primeiro parágrafo:

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

O objeto class3 com estilos para o segundo parágrafo:

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

E, finalmente, class4 para o último:

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

Agora, para aplicar no componente as classes CSS, usaremos o atributo style. Para o primeiro parágrafo, tínhamos a variável class2, vamos passá-la como valor:

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

De maneira similar, vamos adicionar os estilos dos objetos para as demais tags.

Como resultado, o código do componente ficará da seguinte forma:

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

Pegue o componente React que você fez na tarefa da lição anterior, crie objetos com estilos CSS para as suas tags, coloque-os nos respectivos atributos style.