element-ui样式覆盖问题及解决办法

最近用vue + element-ui做项目,element-ui样式覆盖遇到点问题。整理如下。


问题

  • el在vue文件中是标签,但浏览器渲染出来是嵌套的结构,导致样式不能加到对应的类名上
  • 优先级原因,部分样式很难覆盖
  • 拿element-ui的默认样式来改,代码太多,混乱

解决方法

  1. 通用样式
  • 建立element.css文件,将element-ui中的通用样式写入此文件;将element.css引入main.js(即放vue实例的文件)
  1. 非通用样式
  • 非通用样式,写入.vue文件中的
  • 写非通用样式时,在浏览器中用审查元素的方式来找到对应的类名或者标签
  • 如果优先级不够,可以在元素外加div盒子自定义类名修改,或者直接自定义类名进行修改
  • 配置vue-loader后,可以使用深度作用选择器(样式中的选择器能够作用的“更深”,例如影响子组件),>>> 或者 /deep/ .a >>> b .a /deep/ .b

你可能感兴趣的:(element-ui样式覆盖问题及解决办法)