css modules有什么用-亚博电竞手机版

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

在引用的时候：

//red //green

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

importclassnamesfrom'classnames'; constapp=(props)=>{ 	constcls=classnames({ 		btn:true, 		btnlarge:props.type==='submit', 		btnsmall:props.type==='edit', 	}); 	return; }

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

//btnbtnlarge //btnbtnsmall

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