CSSModules有什么用-创新互联

这篇文章将为大家详细讲解有关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

CSS Modules默认是局部作用域的，想要声名一个全局规则，可用:global语法。

比如：

.title {
	color: red;
}
:global(.title) {
	color: green;
}

在引用的时候：

 // red
        // green

classnames Package

在一些复杂场景中，一个元素可能对应多个className，而每个className又基于一些条件来决定是否出现。这时，classnames这个库就非常有用。

import classnames from 'classnames';
const App = (props) => {
	const cls = classnames({
		btn: true,
		btnLarge: props.type === 'submit',
		btnSmall: props.type === 'edit',
	});
	return ;
}

这样，传入不同的 type 给 App 组件，就会返回不同的 className 组合：

 // btn btnLarge
   // btn btnSmall

关于“CSS Modules有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享名称：CSSModules有什么用-创新互联
文章路径：http://cdkjz.cn/article/dcpejp.html