web-dev-qa-db-fra.com

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

J'utilise actuellement des modules CSS avec React pour mon style. Ainsi, chacun de mes composants est importé dans son fichier css spécifique au composant, comme suit:

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

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

export default example;

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

cssreactjscss-modulesreact-css-modules
29
hidace

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 que le module CSS ne le modifiera pas, par exemple: ajouter un identifiant aléatoire à côté de celle-ci)

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

Cela peut être fait en ajoutant simplement:

require('./App.css');

(merci @elmeister qui a correctement répondu à cette question.)

5
hidace

Le seul moyen que j'ai trouvé pour importer des styles globalement, mais uniquement pour un itinéraire spécifique, consiste à ajouter:

<style dangerouslySetInnerHTML={{__html: `
  body { max-width: 100% }
`}} />

dans la méthode de retour de render.

Sinon, la balise style serait ajoutée au <head> et les styles seraient appliqués à tous les itinéraires suivants.

De https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

Peut-être que les styles pourraient être importés sous forme de chaîne à partir d'un fichier pour que le code soit mieux organisé.

0
Manolo