Com estilitzar els components de React mitjançant mòduls CSS

Com estilitzar els components de React mitjançant mòduls CSS

Els mòduls CSS proporcionen una manera d'abastar localment els noms de classe CSS. No us haureu de preocupar per anul·lar estils quan feu servir el mateix nom de classe.





Descobriu com funcionen els mòduls CSS, per què els hauríeu d'utilitzar i com implementar-los en un projecte React.



Què són els mòduls CSS?

El Documents de mòduls CSS descriure un mòdul CSS com un fitxer CSS els noms de classe del qual tenen un àmbit local per defecte. Això vol dir que podeu adreçar variables CSS amb el mateix nom en diferents fitxers CSS.





Escriu classes de mòduls CSS igual que les classes normals. Aleshores, el compilador genera noms de classe únics abans d'enviar el CSS al navegador.

on puc veure pel·lícules gratuïtes en línia sense descarregar ni registrar-me ni pagar ni enquestes

Per exemple, considereu la següent classe .btn en un fitxer anomenat styles.modules.css:



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

Per utilitzar aquest fitxer, heu d'importar-lo a un fitxer JavaScript.

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

Ara, per fer referència a la classe .btn i fer-la disponible en un element, utilitzareu la classe tal com es mostra a continuació:



class="styles.btn"

El procés de compilació substituirà la classe CSS per un nom únic del format com _estils__btn_118346908.

La singularitat dels noms de classe significa que, fins i tot si utilitzeu el mateix nom de classe per a components diferents, no xocaran. Podeu garantir una major independència del codi, ja que podeu emmagatzemar els estils CSS d'un component en un únic fitxer, específic d'aquest component.



Això simplifica la depuració, especialment si esteu treballant amb diversos fulls d'estil. Només haureu de fer un seguiment del mòdul CSS d'un component concret.

Els mòduls CSS també us permeten combinar diverses classes mitjançant el compon paraula clau. Per exemple, considereu la següent classe .btn anterior. Podeu 'ampliar' aquesta classe a altres classes mitjançant composes.

Per a un botó d'enviament, podeu tenir:

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

Això combina les classes .btn i .submit. També podeu compondre estils des d'un altre mòdul CSS com aquest:

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

Tingueu en compte que heu d'escriure la regla composes abans que altres regles.

Com utilitzar els mòduls CSS a React

Com feu servir els mòduls CSS a React depèn de com creeu l'aplicació React.

Si utilitzeu create-react-app, els mòduls CSS es configuren de manera immediata. Tanmateix, si voleu crear l'aplicació des de zero, haureu de configurar els mòduls CSS amb un compilador com webpack.

Per seguir aquest tutorial, hauríeu de tenir:

  • Node instal·lat a la vostra màquina.
  • Una comprensió bàsica dels mòduls ES6.
  • Un bàsic comprensió de React .

Creació d'una aplicació React

Per mantenir les coses senzilles, podeu utilitzar crear-reaccionar-aplicació per armar una aplicació React.

Executeu aquesta comanda a crear un nou projecte React anomenats react-css-mòduls:

npx create-react-app react-css-modules

Això generarà un nou fitxer anomenat react-css-modules amb totes les dependències necessàries per començar amb React.

Creació d'un component de botó

En aquest pas, creareu un component Button i un mòdul CSS anomenat Button.module.css. A la carpeta src, creeu una nova carpeta anomenada Components. En aquesta carpeta creeu una altra carpeta anomenada Button. Afegireu el component Button i els seus estils en aquesta carpeta.

són Apple Airpods compatibles amb Android

Navega a src/Components/Botó i creeu Button.js.

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

A continuació, creeu un fitxer nou anomenat Button.module.css i afegiu el següent.

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

Per utilitzar aquesta classe al component Button, importeu-la com a estils i feu-hi referència al nom de classe de l'element botó de la següent manera:

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

Aquest és un exemple senzill que mostra com utilitzar una sola classe. És possible que vulgueu compartir estils entre diferents components o fins i tot combinar classes. Per a això, podeu utilitzar la paraula clau composes tal com s'ha esmentat anteriorment en aquest article.

Ús de la composició

Primer, modifiqueu el component Button amb el codi següent.

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

Aquest codi fa que el component Button sigui més dinàmic acceptant un valor de tipus com a prop. Aquest tipus determinarà el nom de classe aplicat a l'element botó. Així, si el botó és un botó d'enviament, el nom de la classe serà 'enviar'. Si és 'error', el nom de la classe serà 'error', i així successivament.

Per utilitzar la paraula clau composes en lloc d'escriure tots els estils de cada botó des de zero, afegiu el següent a 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; 
}

En aquest exemple, la classe primària i la classe secundària utilitzen la classe btn. En fer això, reduireu la quantitat de codi que necessiteu escriure.

Podeu portar això encara més lluny amb un mòdul CSS extern anomenat colors.module.css , que conté els colors utilitzats en l'aplicació. Aleshores podeu utilitzar aquest mòdul en altres mòduls. Per exemple, creeu el fitxer colors.module.css a l'arrel de la carpeta Components amb el codi següent:

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

Ara, al fitxer Button/Button.module.css, modifiqueu les classes primàries i secundàries per utilitzar les classes anteriors com aquesta:

.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 amb mòduls CSS

Podeu utilitzar mòduls CSS per millorar la modularitat de la vostra base de codi. Com a exemple, podeu crear una classe CSS senzilla per a un component de botó i reutilitzar classes CSS mitjançant la composició.

Per potenciar l'ús dels mòduls CSS, utilitzeu Sass. Sass (Fulls d'estil sintàcticament impressionants) és un preprocessador CSS que ofereix un munt de funcions. Inclouen suport per a l'imbricació, les variables i l'herència que no estan disponibles a CSS. Amb Sass, podeu afegir funcions més complexes a la vostra aplicació.