如何使React CSS导入组件范围？

CSS模块是一个CSS文件，默认情况下，所有类名和动画名都在本地作用域内。所有URL（url（…））和@imports均为模块请求格式（./xxx和../xxx表示相对，xxx和xxx

/ yyy表示在模块文件夹中，即在node_modules中）。

这是一个简单的示例：

假设我们有一个类似的React组件：

import React from 'react';import styles from './styles/button.css';class Button extends React.Component {  render() {    return (      <button className={styles.button}>        Click Me      </button>    );  }}export default Button;

和一些CSS

./styles/button.css

.button {  border-radius: 3px;  background-color: green;  color: white;}

CSS模块执行完魔术后，生成的CSS将类似于：

.button_3GjDE {  border-radius: 3px;  background-color: green;  color: white;}

其中的

_3DjDE

替代

一个简单的替代方法是避免使用通用选择器（如

p

pre

将其应用于您的示例，您可以使用：

.aboutContainer {  # Some style}.aboutContainer__pre {  # Some style}

基本上，您需要设置样式的所有元素都将具有唯一的类名。