Comment appliquer des styles globaux avec des modules CSS dans une application de réaction?

Question

J'utilise actuellement des modules CSS avec React pour mon style. Donc, chacun de mes composants est l'importation dans son fichier CSS spécifique composant, comme ceci:

import React from 'react'; 
import styles from './App.css'; 

const example =() => (
    <div className={styles.content}> 
    Hello World! 
    </div> 
); 

export default example; 

Cela fonctionne bien en dénommant des composants individuels, mais comment puis-je appliquer un style global (html, body, balises d'en-tête, divs, etc. .) qui n'est pas spécifique au composant?

Answer 1

Puisque vous utilisez la syntaxe d'importation ES6 vous pouvez utiliser la même syntaxe pour importer votre feuille de style

import './App.css' 

en outre, vous pouvez envelopper votre classe avec :global pour passer à la portée globale (cela signifie module CSS ne modulif y it, par exemple: ajouter un identifiant aléatoire à côté de lui)

:global(.myclass) { 
    background-color: red; 
} 

Answer 2

Cela peut se faire en ajoutant simplement: (. Merci @elmeister qui ont répondu correctement à cette question)

require('./App.css');