撤底覆盖vant框架样式
Vant的样式采用less所写,.
所以,如果你期待通过如下方式修改 weui-cells 的样式。是没有任何效果的:
<style scoped>
.fuck .weui-cells {
// ...
}
</style>
这是因为,所有的scoped中的css最终编译出来都会变成这样:
.fuck[data-v-17bb9a05] .weui-cells[data-v-17bb9a05]
解决方法一:除非你将 scoped 移除,或者新建一个没有 scoped 的 style(一个.vue文件允许多个style)
<style scoped>
.fuck {
// ...
}</style>
<style>
.fuck .weui-cells {
// ...
}</style>
解决方法二:深度作用选择器 >>>
(注意,只作用于css)
.fuck >>> .weui-cells {
// ...}
但如果是sass/less的话可能无法识别,这时候需要使用 /deep/ 选择器。
<style lang="scss" scoped>
.select {
width: 100px;
/deep/ .el-input__inner {
border: 0;
color: #000;
}
}</style>
在vue-cli3编译时,deep的方式会报错或者警告。可以使用如下