如何在React应用程序中使用CSS模块应用全局样式？

Question

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

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

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

export default example;

在设置单个组件的样式时，这种方法很好用，但是如何应用不是组件特定的全局样式（html，body，header标签，div等）？

Answer 1

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

import './App.css'

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

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