Å bruke en CSS-fil for å style React-komponenter stammer fra den tradisjonelle HTML-CSS-strukturen. Her er en trinnvis veiledning om hvordan en CSS-fil kan benyttes for å style React-komponenter:

1. Opprett en CSS-fil

Start med å opprette en egen CSS-fil med filendelsen .css. Denne filen kan ligge i samme mappe som komponenten, eller i en egen mappe dedikert til stilark, hvor alle CSS-filer er samlet.

Eksempel:

2. Importer CSS-filen

Bruk 'import'-setningen for å importere CSS-filer inn i komponentfilen. Plasser denne import-setningen øverst i komponentfilen. Angi riktig filsti innenfor anførselstegnene ''.

Eksempel:

// Import the CSS file
import './index.css';

Hvis CSS-filen ligger i styles-mappen, vil import-setningen ha følgende syntaks:

// Import the CSS file from a folder
import './styles/index.css';

Merk

Bruk punktum og skråstrek-notasjon ./ for å referere til en fil i samme katalog. For å få tilgang til en fil utenfor gjeldende mappe og navigere til foreldrekatalogen, bruk to punktum og en skråstrek ../.

3. Bruk stilregler på komponenten

Når stilene er importert, blir komponenten klar over tilstedeværelsen av CSS. Dermed kan du bruke CSS-selektorer og klassenavn for å style elementene. Den eneste forskjellen er at i React-applikasjoner benytter vi attributtet className i stedet for class-attributtet som brukes i HTML-filer.

Eksempel:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Nå kan vi bruke CSS-klassene container, title og description for å style elementene i Block-komponenten.

Legg til styling

Nå kan vi åpne CSS-filen og legge til stilregler for de definerte klassenavnene. For eksempel kan index.css-filen inneholde følgende stilregler:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

Ved å følge disse stegene vil stilene som er definert i CSS-filen bli brukt på de tilsvarende elementene i React-komponenten.

Full app-kode: