我目前正在使用带有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等)?

推荐答案

因为您使用的是ES6导入语法,所以可以使用相同的语法导入样式表

import './App.css'

此外,你可以用:global来包装你的类,以切换到全局范围(这意味着CSS模块不会将其模块化,例如:在其旁边添加一个随机id)

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

Css相关问答推荐

为什么我的CSS关键帧动画在循环之间稍微暂停?

Javascript Splitter Divider hover color css

如何在移动屏幕尺寸上包装元素?

如何在CSS中创建水平/垂直对称的虚线边框?

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

背景图像允许溢出输入按钮

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能?

根据选项 colored颜色 更改 Select 文本 colored颜色

semantic-ui-react 使输入使用全宽度可用

CSS和 Select 器 - 我可以 Select 具有多个类的元素吗?

如何强制 div 出现在下方而不是旁边?

Div Size 自动调整内容大小

li 中的第二行在 CSS-reset 后的项目符号下开始

CSS图像最大宽度设置为原始图像大小?

让 div 扩展全高

为什么浏览器会为 CSS 属性创建供应商前缀?

bootstrap.css 和 bootstrap-theme.css 有什么区别?

将 CSS 类添加到 Html.BeginForm()

如何在 CSS 中给出背景图像路径?

从 textarea 中删除所有样式(边框、发光)