CSS Modules是啥子东西？一起来了解一下！

今年四月份的时候面试了一家 公司 ，

技 术 面的时候被人家问到了CSS Module有 了解 过么，我说没有了解过，

他就继续问到，那你在平时开发的时候给组件和元素起类名要怎么办呢？
我说给元素和组件加指定前缀，这样就能够保证自己写的类名和其他同事写的类名不会起冲突。

然后就没然后了，，后续又问了我很多React原理啥的面试就过了。

今天我们就把CSS Modules是个啥子东西给他弄明白，这样会更加分。

【推荐教程：CSS视频教程 】

首先我们来看一张图：

一张图理解 CSS Modules 的工作原理：

我们自己编码的时候有俩个文件，一个是 PR oductList.less文件，一个是ProductList.jsx文件
在构建之后会将less文件转换成蓝色标题的那个文件。

可以由此看出：

button class在构建之后会被重命名为ProductList_button_1FU0u。button是local n am e，而 ProductList_button_1FU0u 是 global name 。 你可以用简短的描述性名字，而不需要关心命名冲突问题。 @H_ 512 _34@

然后你要做的全部事情就是在 css/less 文件里写 .button {…}，并在组件里通过 styles.button 来引用他。

定义全局CSS

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

比如：

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

在引用的时候：

<App  classname ={styles.title} /> // red
<App className="title" />        // green

class names Package

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

import classnames  From  & # 39;classnames';
const App = (props) => {
	const cls = classnames({
		 BT n: true,
		btnL arg e: props.ty PE   ===  's ub mit',
		btnSmall: props.type  == = 'edit',
	});
	return <div className={ cls } />;
}

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

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

更多编程相关知识，请访问：编程教学！！

以上就是CSS Modules是啥子东西？一起来了解一下！的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 CSS Modules是啥子东西？一起来了解一下！ 全部内容，希望文章能够帮你解决 CSS Modules是啥子东西？一起来了解一下！ 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS Modules是啥子东西？一起来了解一下！的详细内容...