Comment appliquer les styles globaux avec des modules CSS dans un réagir application?

Question

Comment appliquer les styles globaux avec des modules CSS dans un réagir application?

Demandé el 1 de Octobre, 2016: Quand la question a-t-elle été
22922 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis actuellement à l'aide des Modules CSS à Réagir pour mon style. Ainsi, chacun de mes composants est de l'importation dans sa composante spécifique fichier css, 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 quand le style des composants individuels, mais comment dois-je appliquer mondial de style (html, le corps, les balises d'en-tête, vrd, etc.) ce n'est pas la composante spécifique?

Demandé el 1 de Octobre, 2016 par hidace

Answer 1

3 Réponses

Answer 2

152voto

felixyadomi Points 713

Puisque vous êtes à l'aide de l'ES6 importation de syntaxe, vous pouvez utiliser la même syntaxe pour importer votre feuille de style

import './App.css'

Aussi, vous pouvez envelopper votre classe avec des :global pour passer à la portée globale (ce qui signifie CSS Module ne pas modulify, par exemple: l'ajout d'un id aléatoire à côté d'elle)

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

Répondu el 16 de Octobre, 2016 par felixyadomi (713 Points )

Answer 3

7voto

hidace Points 989

Cela peut être fait simplement en ajoutant:

require('./App.css');

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

Répondu el 6 de Octobre, 2016 par hidace (989 Points )

Answer 4

2voto

Manolo Points 1769

Le seul moyen que j'ai trouvé pour l'importation de styles à l'échelle mondiale, mais seulement pour un itinéraire spécifique est d'ajouter:

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

à l'intérieur le retour de l' render méthode.

Sinon, l' style balise doit être ajoutée à la <head>, et les styles s'appliquent à tous les itinéraires.

À partir de https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

Peut-être que les styles peuvent être importés comme une chaîne de caractères à partir d'un fichier pour avoir le code plus organisé.

Répondu el 17 de Avril, 2018 par Manolo (1769 Points )

Comment appliquer les styles globaux avec des modules CSS dans un réagir application?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment appliquer les styles globaux avec des modules CSS dans un réagir application?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: