如何在React应用程序中使用带有CSS模块的全局样式?

问题描述：

我目前正在使用带有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模块的全局样式?

相关推荐