Även om inline-stilar är användbara för mindre eller dynamisk styling, förlitar sig de flesta verkliga applikationer på externa CSS-filer. Detta tillvägagångssätt håller stilar separerade från komponentlogik och gör dem enklare att hantera när projekt växer.

React har inbyggt stöd för externa CSS-filer. Du kan skriva vanlig CSS och tillämpa den på komponenter med hjälp av klassnamn, precis som i traditionell webbutveckling.

Skapa en extern CSS-fil

Skapa först en CSS-fil och definiera dina stilar:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Denna CSS-fil innehåller en enkel klass som kan återanvändas i flera komponenter.

Importera CSS i en komponent

För att använda stilarna, importera CSS-filen i din komponentfil:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

I React skrivs attributet class som className eftersom class är ett reserverat nyckelord i JavaScript.

Hur extern CSS fungerar i React

CSS-filer tillämpas globalt som standard. Alla komponenter kan använda en klass som definierats i en importerad CSS-fil. Stilar beter sig på samma sätt som i vanlig HTML och CSS. Detta gör extern CSS bekant och lätt att använda, särskilt för utvecklare med bakgrund inom traditionell webbutveckling.

När extern CSS bör användas

Extern CSS är ett bra val när:

• Stilar delas mellan flera komponenter;
• Layouter blir mer komplexa;
• Du vill ha en tydlig separation mellan struktur och utseende.

För större projekt leder extern CSS ofta till renare och mer underhållbar kod.