La bellezza dell'ecosistema che ruota attorno a React è la vastità di librerie che abbiamo a disposizione. In questo script ci soffermiamo su una in particolare: CSS Module.
Grazie a CSS Module, possiamo facilmente creare dei micro-moduli CSS da incorporare all'interno della pagina.
In questo ambito molte librerie utilizzano una sintassi JavaScript al cui interno scrivere il CSS sottoforma di stringa. Con CSS Module non ve ne sarà bisogno, perchè tutto il lavoro sporco lo farà il pre-compilatore.
/* Button.module.css */ .miaClasse { background-color: #123123; color: #ddd; font-weight: light; padding: 5px; border-radius: 3px; cursor: pointer; } .miaClasse:hover { background-color: #666; }
Partendo da questo file CSS, l'implementazione all'interno del componente sarà la seguente.
import styles from './Button.module.css'; const Button = () => ( <button className={styles.miaClasse}> Button </button> ); export default Button;
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Potenziare Azure AI Search con la ricerca vettoriale
Effettuare il refresh dei dati di una QuickGrid di Blazor
Estrarre dati randomici da una lista di oggetti in C#
Utilizzare QuickGrid di Blazor con Entity Framework
Utilizzare i primary constructor di C# per inizializzare le proprietà
Eseguire i worklow di GitHub su runner potenziati
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
C# 12: Cosa c'è di nuovo e interessante
Usare il colore CSS per migliorare lo stile della pagina
Evitare il flickering dei componenti nel prerender di Blazor 8
Come EF 8 ha ottimizzato le query che usano il metodo Contains