在jsx中,通过css对象来表示类名,会被webpack等打包工具变成hash字符串避免类名重复
通过:global的方式可以避免指定的类名被编译成hash字符串
/* local scope */
.h1 {
color:red;
}
/* global scope */
:global(.h2) {
color: blue;
}
:global {
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
border: none;
}
}
var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');
ReactDOM.render(
<div>
<h1 className={style.h1}>Hello World</h1>
<h2 className="h2">Hello Webpack</h2>
</div>,
document.getElementById('example')
);
最后
以上就是懦弱荔枝最近收集整理的关于css jsx中使用:global和对象引入样式的区别的全部内容，更多相关css内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复