lulujianglab/blog

elementUI默认样式修改不成功的问题

Opened this issue · 0 comments

问题

filter.vue文件中的样式表中写入了如下样式

<style scoped>
.el-input__inner {
  background-color: #F5F5F5;
  border: none;
}
</scope>

但设置el-input的样式并没有效果。

image

image

原因和解决方法

是因为scoped的原因,去掉scoped就可以显示样式

但此时会污染全局样式,所以可以将该样式放在控制全局样式的文件里(比如app.css),或者在该样式表的外面再写一个全局样式

<style>
.el-input__inner {
  background-color: #F5F5F5;
  border: none;
}
</style>
<style scoped>
  ...
</style>

image

如果不希望所有的el-input都变成相同样式,可以给需要修改的el-input添加一个类