Att använda en CSS-fil för att styla React-komponenter härstammar från den traditionella HTML-CSS-strukturen. Här är en steg-för-steg-guide om hur en CSS-fil kan användas för att styla React-komponenter:

1. Skapa en CSS-fil

Börja med att skapa en separat CSS-fil med filändelsen .css. Denna fil kan placeras i samma mapp som komponenten eller i en dedikerad mapp specifikt för stilar, där alla CSS-filer är organiserade tillsammans.

Exempel:

2. Importera CSS-filen

Använd 'import'-satsen för att importera CSS-filer till komponentfilen. Placera denna import-sats högst upp i komponentfilen. Ange rätt filsökväg inom citattecknen ''.

Exempel:

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

Om CSS-filen ligger i mappen styles, skulle import-satsen ha följande syntax:

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

Obs

Använd punkt- och snedstrecknotationen ./ för att referera till en fil i samma katalog. För att komma åt en fil utanför den aktuella mappen och navigera till överordnad katalog, använd två punkter och ett snedstreck ../.

3. Tillämpa stilar på komponenten

När stilarna har importerats blir din komponent medveten om CSS:ens närvaro. Därmed kan du använda CSS-selektorer och klassnamn för att styla elementen. Den enda skillnaden är att i React-applikationer använder vi attributet className istället för attributet class som används i HTML-filer.

Exempel:

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

Nu kan vi använda CSS-klasserna container, title och description för att styla elementen inom Block-komponenten.

Lägg till styling

Vid det här laget kan vi öppna CSS-filen och tillämpa stilar på de definierade klassnamnen. Till exempel kan filen index.css innehålla följande stilar:

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

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

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

Genom att följa dessa steg kommer vi att tillämpa de stilar som definierats i CSS-filen på motsvarande element i React-komponenten.

Fullständig appkod: