ElementUI默认样式修改
修改ElementUI 样式的几种方式
-
新建全局样式表
新建 global.css 文件,并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下,在 main.js 的引用写法如下:
import "./assets/style/global.css"
在 global.css 文件中写的样式,无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。
-
在当前-vue-单页面中添加一个新的style标签
在当前的vue单页面的style标签后,添加一对新的style标签,新的style标签中不要添加scoped属性。在有写scoped的style标签中书写的样式不会覆盖 ElementUI 默认的样式。
-
使用/deep/深度修改标签样式
找到需要修改的 ElementUI 标签的类名,然后在类名前加上/deep/,可以强制修改默认样式。这种方式可以直接用到有scoped属性的 style 标签中。
// 修改级联选择框的默认宽度 /deep/ .el-cascader { width: 100%; }
第一种全局引入css文件的方式,适合于对elementUI整体的修改,比如整体配色的修改;
第二种添加一个style标签的形式,也能够实现修改默认样式的效果,但实际上因为是修改了全局的样式,因此 在不同的vue组件中修改同一个样式有可能会有冲突。
第三种方式通过 /deep/ 的方式可以很方便的在vue组件中修改默认样式,也不会于其他页面有冲突。