如何在React应用程序中使用带有CSS模块的全局样式? [英] How to apply global styles with CSS modules in a react app?

问题描述

我目前正在使用带有React的CSS模块进行样式设计.因此，我的每个组件都在其特定于组件的css文件中导入，如下所示:

I'm currently using CSS Modules with React for my styling. So each of my components is importing in it's component specific css file, like so:

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

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

export default example;

在对单个组件进行样式设置时，此方法可以很好地工作，但是如何应用不是特定于组件的全局样式(html，body，header标签，divs等)?

This works fine when styling individual components, but how do I apply global styling (html, body, header tags, divs, etc.) that isn't component specific?

推荐答案

由于您使用的是ES6导入语法，因此可以使用相同的语法来导入样式表

Since you're using the ES6 import syntax you may use the same syntax to import your stylesheet

import './App.css'

此外，您可以用:global包装类以切换到全局范围(这意味着CSS模块不会对其进行调制，例如:在其旁边添加随机ID)

Also, you can wrap your class with :global to switch to the global scope (this mean CSS Module won't modulify it, eg: adding a random id next to it)

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

这篇关于如何在React应用程序中使用带有CSS模块的全局样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！