I fogli di stile modulari in React possono essere utilizzati per rendere più semplice e gestibile lo stile dei componenti. Ecco come si può implementare:
1. Installazione: Prima di tutto, è necessario installare `style-loader` e `css-loader` usando npm o yarn.
- npm: `npm install —save-dev style-loader css-loader`
- yarn: `yarn add —dev style-loader css-loader`
1. Configurazione: Aggiungi le seguenti regole nel tuo file di configurazione Webpack (`webpack.config.js`) per rendere funzionale il modulo CSS.
\`\`\` module.exports = { // … module: { rules: [ { test: /.css$/, use: [ ‘style-loader’, { loader: ‘css-loader’, options: { modules: true, }, }, ], }, ], }, }; \`\`\`1. Creazione di un foglio di stile modulare: Nella tua cartella di progetto, crea un nuovo file CSS. Ad esempio, `MyComponent.module.css`. Utilizza il formato CamelCase per i nomi delle classi.
\`\`\`css .myClass { background-color: blue; } \`\`\`1. Importa il foglio di stile nel tuo componente: Importa il modulo CSS nel tuo componente React e applica le classi CSS utilizzando la sintassi degli oggetti JavaScript.
\`\`\`jsx import React from ‘react’; import styles from ‘./MyComponent.module.css’; const MyComponent = () => (In questo modo, la classe `myClass` sarà utilizzata solo nel componente `MyComponent` e non influenzerà lo stile di altri componenti. Questo ti consente di avere un codice piu pulito e modulare.
