这篇文章将为大家详细讲解有关CSS Modules有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
一张图理解 CSS Modules 的工作原理：
我们自己编码的时候有俩个文件，一个是ProductList.less文件，一个是ProductList.jsx文件
在构建之后会将less文件转换成蓝色标题的那个文件。
可以由此看出：
button class在构建之后会被重命名为ProductList_button_1FU0u。button是local name，而 ProductList_button_1FU0u 是 global name 。你可以用简短的描述性名字，而不需要关心命名冲突问题。
然后你要做的全部事情就是在 css/less 文件里写 .button {…}，并在组件里通过 styles.button 来引用他。
CSS Modules默认是局部作用域的，想要声名一个全局规则，可用:global语法。
比如：
.title {
color: red;
}
:global(.title) {
color: green;
}在引用的时候：
<App className={styles.title} /> // red
<App className="title" /> // green在一些复杂场景中，一个元素可能对应多个className，而每个className又基于一些条件来决定是否出现。这时，classnames这个库就非常有用。
import classnames from 'classnames';
const App = (props) => {
const cls = classnames({
btn: true,
btnLarge: props.type === 'submit',
btnSmall: props.type === 'edit',
});
return <div className={ cls } />;
}这样，传入不同的 type 给 App 组件，就会返回不同的 className 组合：
<App type="submit" /> // btn btnLarge <App type="edit" /> // btn btnSmall
关于“CSS Modules有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
