CSS Module样式隔离
warning:
这篇文章距离上次修改已过440天，其中的内容可能已经有所变动。
CSS Module是一种CSS的新模式，它可以帮助我们避免样式污染问题，也就是全局样式污染。它通过提供一种方式，将样式和选择器封装在一个局部作用域中，只在当前模块中有效，不会影响到其他部分。
在React中，我们可以使用create-react-app脚手架创建的项目默认支持CSS Module。在该项目中，只需要将CSS文件后缀名改为.module.css，然后在JSX文件中引入这个模块化的CSS文件即可。
例如，我们有一个App.js文件和一个App.module.css文件。
App.module.css文件：
.text {
color: blue;
}App.js文件：
import React from 'react';
import styles from './App.module.css';
function App() {
return <div className={styles.text}>Hello, CSS Module!</div>;
}
export default App;在这个例子中，styles对象是一个由Webpack生成的对象，它的键是本地的CSS类名，值是一个唯一的，不可预测的，全局唯一的类名。因此，.text类在App.js文件中是以styles.text的方式引用的，这样可以避免.text类在全局范围内的样式污染问题。
评论已关闭