之前用 vue
的单文件组件在写样式时,style
标签加上 scoped
属性
<style lang="less" scoped>
.toast-text{
font-size: 14px;
}
</style>
wbpack构建后访问,如下所示。发现多了字符串_v-01685f66
来控制css的作用域,一定程度上了对其他组件的影响(如果不小心写了同名class)
.toast-text[_v-01685f66]{
font-size: 14px;
}
<span class="toast-text" _v-01685f66="">hahah</span>
有工具可以对react
的组件可以做这样的处理吗?或者大家是如何避免这种组件之间同名css 的影响?
http://www.75team.com/post/1049.html cssmodules
还可以看哈postcss
现在可以直接用inline的方式来写css,规模控制在一个最小粒度的子组件中(根据实际情况和复用性调整)
优点是不会造成命名冲突;缺点是css代码不能被缓存。
添加demo:
const styles = {
container: {
//...
},
show: {
display: 'block'
},
hide: {
display: 'none'
},
baz: {
//...
}
}
<Bar
style={Object.assign({}, styles.container, (this.props.display ? styles.show : styles.hide))}>
// 当需要根据状态对样式进行控制时,用assign来merge
<Baz
style={styles.baz}
/>
</Bar>
我都是把样式嵌套在组件最高层元素下面,这样就算样式一样因为父元素不一样也不会有问题了
css-loader
可以参考看看。
试试使用css-modules, 可以很好的解决类名可能会冲突的问题 , 看这里