Cum să stilați componentele React folosind modulele CSS

Cum să stilați componentele React folosind modulele CSS

Modulele CSS oferă o modalitate de a defini local numele claselor CSS. Nu trebuie să vă faceți griji cu privire la suprascrierea stilurilor atunci când utilizați același nume de clasă.





Aflați cum funcționează modulele CSS, de ce ar trebui să le utilizați și cum să le implementați într-un proiect React.



Ce sunt modulele CSS?

The Documente module CSS descrieți un modul CSS ca un fișier CSS ale cărui nume de clasă sunt definite local în mod implicit. Aceasta înseamnă că puteți adresa variabile CSS cu același nume în fișiere CSS diferite.





Scrieți clase de module CSS la fel ca clasele normale. Apoi compilatorul generează nume de clase unice înainte de a trimite CSS-ul către browser.

nu în aplicație achiziționează jocuri gratuite

De exemplu, luați în considerare următoarea clasă .btn într-un fișier numit styles.modules.css:



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

Pentru a utiliza acest fișier, trebuie să-l importați într-un fișier JavaScript.

import styles from "./styles.module.js"

Acum, pentru a face referire la clasa .btn și a o face disponibilă într-un element, ați folosi clasa așa cum se arată mai jos:



class="styles.btn"

Procesul de construire va înlocui clasa CSS cu un nume unic al formatului _styles__btn_118346908.

Unicitatea numelor de clasă înseamnă că, chiar dacă utilizați același nume de clasă pentru diferite componente, acestea nu se vor ciocni. Puteți garanta o mai mare independență a codului, deoarece puteți stoca stilurile CSS ale unei componente într-un singur fișier, specific acelei componente.



Acest lucru simplifică depanarea, mai ales dacă lucrați cu mai multe foi de stil. Va trebui doar să urmăriți modulul CSS pentru o anumită componentă.

Modulele CSS vă permit, de asemenea, să combinați mai multe clase prin intermediul compune cuvânt cheie. De exemplu, luați în considerare următoarea clasă .btn de mai sus. Puteți „extinde” acea clasă în alte clase folosind compoziții.

Pentru un buton de trimitere, puteți avea:

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Aceasta combină clasele .btn și .submit. De asemenea, puteți compune stiluri dintr-un alt modul CSS, astfel:

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

Rețineți că trebuie să scrieți regula comps înaintea altor reguli.

Cum să utilizați modulele CSS în React

Modul în care utilizați modulele CSS în React depinde de modul în care creați aplicația React.

Dacă utilizați create-react-app, modulele CSS sunt configurate din cutie. Cu toate acestea, dacă intenționați să creați aplicația de la zero, va trebui să configurați modulele CSS cu un compilator precum webpack.

Pentru a urma acest tutorial, ar trebui să aveți:

  • Nodul instalat pe mașina dvs.
  • O înțelegere de bază a modulelor ES6.
  • Un element de bază înțelegerea lui React .

Crearea unei aplicații React

Pentru a menține lucrurile simple, puteți folosi create-react-app pentru a monta o aplicație React.

Rulați această comandă către creați un nou proiect React numite react-css-module:

npx create-react-app react-css-modules

Acest lucru va genera un nou fișier numit react-css-modules cu toate dependențele necesare pentru a începe cu React.

Crearea unei componente de buton

Veți crea o componentă Button și un modul CSS numit Button.module.css în acest pas. În folderul src, creați un folder nou numit Componente. În acel folder creați un alt folder numit Button. Veți adăuga componenta Button și stilurile acesteia în acest folder.

Navigheaza catre src/Components/Button și creați Button.js.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

Apoi, creați un fișier nou numit Button.module.css și adăugați următoarele.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Pentru a utiliza această clasă în componenta Button, importați-o ca stiluri și faceți-o referire în numele clasei elementului buton astfel:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

Acesta este un exemplu simplu care arată cum să utilizați o singură clasă. Poate doriți să partajați stiluri între diferite componente sau chiar să combinați clase. Pentru aceasta, puteți utiliza cuvântul cheie compus așa cum sa menționat anterior în acest articol.

Utilizarea Compoziției

Mai întâi, modificați componenta Button cu următorul cod.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

Acest cod face componenta Button mai dinamică, acceptând o valoare de tip ca prop. Acest tip va determina numele clasei aplicat elementului buton. Deci, dacă butonul este un buton de trimitere, numele clasei va fi „trimite”. Dacă este „eroare”, numele clasei va fi „eroare” și așa mai departe.

Pentru a utiliza cuvântul cheie composes în loc să scrieți toate stilurile pentru fiecare buton de la zero, adăugați următoarele la Button.module.css.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

În acest exemplu, clasa primară și clasa secundară utilizează clasa btn. Făcând acest lucru, reduceți cantitatea de cod pe care trebuie să o scrieți.

Puteți duce acest lucru și mai departe cu un modul CSS extern numit culori.modul.css , care conțin culorile utilizate în aplicație. Apoi puteți utiliza acest modul în alte module. De exemplu, creați fișierul colors.module.css în rădăcina folderului Componente cu următorul cod:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Acum, în fișierul Button/Button.module.css, modificați clasele primare și secundare pentru a utiliza clasele de mai sus astfel:

unde merg descărcările pe Android 
.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

Sass cu module CSS

Puteți folosi module CSS pentru a îmbunătăți modularitatea bazei de cod. De exemplu, puteți crea o clasă CSS simplă pentru o componentă de buton și puteți reutiliza clase CSS prin compunere.

Pentru a vă spori utilizarea modulelor CSS, utilizați Sass. Sass—Syntactically Awesome Style Sheets—este un preprocesor CSS care oferă o mulțime de funcții. Acestea includ suport pentru imbricare, variabile și moștenire care nu sunt disponibile în CSS. Cu Sass, puteți adăuga caracteristici mai complexe aplicației dvs.