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

Question

我目前正在将 CSS 模块与 React 一起用于我的样式。所以我的每个组件都在其组件特定的 css 文件中导入，如下所示:

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

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

export default example;

这在为单个组件设置样式时效果很好，但我如何应用非组件特定的全局样式(html、正文、标题标签、div 等)？

Answer 1

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

import './App.css'

此外，您可以用 :global 包装您的类以切换到全局范围(这意味着 CSS 模块不会修改它，例如:在它旁边添加一个随机 id)

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