Kom igång med styling med CSS modules i React

I den här och de följande lektionerna kommer vi att undersöka ytterligare ett modernt och effektivt tillvägagångssätt för styling av React- komponenter - användning av CSS modules.

CSS-moduler i detta tillvägagångssätt är separata kompilerade CSS-filer, där klassnamn och animationer finns i ett lokalt scope, vilket undviker konflikter mellan klassnamn från olika komponenter.

För att börja skapar vi och startar vårt enkla React-program buttons. För detta skapar vi en tom mapp test, går in i den och skriver följande kommandon i terminalen:

terminalnpx create-react-app buttons
cd buttons
npm start

Om du har en ny version av React, det vill säga den stöder Create React App v2 och högre, så behöver du inte göra några ytterligare inställningar, eftersom CSS-moduler i så fall kommer att stödjas automatiskt. För att kontrollera, titta i package.json, om beroendet react-scripts är version 2.x.x eller högre, så är allt i ordning. Annars, uppdatera din React.

Vår applikation för styling med hjälp av CSS modules kommer att innehålla tre knappar.

Vi kommer att namnge CSS-filer, enligt konventionen, på följande sätt: [namn].module.css.

Låt oss nu skapa mappen components i src, och lägga till filen Buttons.module.css med CSS-stilar till våra knappar:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

Skapa också i mappen components en tom fil för React-komponenten Buttons.js, rör samtidigt inte den genererade filen App.js, vi kommer att hantera den senare!

I Buttons.js måste vi importera filen med CSS-stilar, samt applicera dessa stilar till varje knapp med hjälp av attributet class:

Buttons.jsimport styles from "./Buttons.module.css"; 

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

Förresten, det är inte nödvändigt att använda ordet styles för namnet på det importerade objektet med stilar, du kan kalla det, som du vill.

I nästa lektion kommer vi att avsluta vår applikation.