Använda global CSS för styling i React

Antag att vi har en React-komponent App som innehåller en div, och inuti div:en finns tre stycken:

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

Låt oss styla denna komponent. För att göra detta, i samma mapp src som vår komponent skapar vi en vanlig CSS-fil med stilar styles.css för våra taggar.

I denna fil skapar vi en klass class1 med stilar för div:en:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

Nu lägger vi till klassen class2 med stilar för det första stycket:

.class2 {
	color: orangered;
	font-weight: bold;
}

Klassen class3 med stilar för det andra stycket:

.class3 {
	font-style: italic;
	color: brown;
}

Slutligen skapar vi klassen class4 för det sista stycket:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

Vi är klara med CSS-filen. Återstår att applicera våra CSS-stilar som vi skrev för taggarna. Låt oss återgå till vår fil App.js med komponenten.

Det första vi måste göra - lägga till en importrad för vår stilmall styles.css överst i filen:

import './styles.css';

Nu, för att applicera CSS-klasserna från filen i komponenten, använder vi attributet class. För det första stycket hade vi klassen class2, låt oss applicera den:

<p class="class2">text</p>

På liknande sätt lägger vi till klasser för de övriga taggarna. Som ett resultat får vi följande kod:

<div class="class1">
	<p class="class2">text</p>
	<p class="class3">text</p>
	<p class="class4">text</p>
</div>

Skapa en React-komponent som ska innehålla en div, och i div:en ska det finnas två knappar. Skapa en fil styles.css med CSS-stilar för dina taggar. Applicera de skrivna stilarna på komponentens taggar.