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:

App.jsfunction 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:

styles.css.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:

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

Klassen class3 med stilar för det andra stycket:

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

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

styles.css.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:

App.jsimport './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:

App.js<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:

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