如何在 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、正文、标题标签、div 等）？

原文由 hidace 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

import './App.css'

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

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

原文由 felixyadomi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这可以通过简单地添加来完成：

 require('./App.css');

（感谢@elmeister 正确回答了这个问题。）

原文由 hidace 发布，翻译遵循 CC BY-SA 3.0 许可协议