修改 ElementUI 样式

ElementUI 是一款非常强大的前端 UI 组件库，它默认定义了很多美观的样式，但是我们在实际开发过程中不可避免地遇到需要修改 ElementUI 默认样式。下面总结了几种修改默认样式的方法。

1. 新建全局样式表

新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，在 main.js 的引用写法如下：

1. 新建全局样式表

新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，在 main.js 的引用写法如下：

import "./assets/style/global.css";

在 global.css 文件中写的样式，无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。

2. 在当前 vue 单页面中添加一个新的style标签

在当前的 vue 单页面的style标签后，添加一对新的style标签，新的style标签中不要添加scoped属性。在有写scoped的style标签中书写的样式不会覆盖 ElementUI 默认的样式。

3. 使用 /deep/ 深度修改标签样式

找到需要修改的 ElementUI 标签的类名，然后在类名前加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。

// 修改级联选择框的默认宽度/deep/ .el-cascader {  width: 100%;}

4. 通过内联样式 或者 绑定类样式覆盖默认样式

通过内联样式 style ，绑定类样式的方式，可以在某些标签中可以直接覆盖默认样式，不是很通用。具体实例如下：

内联样式style的方式：

<el-button :style="selfstyle">默认按钮</el-button><script>    export default {      data() {        return {            selfstyle: {                color: "white",		marginTop: "10px",		width: "100px",		backgroundColor: "cadetblue"            }        };      }    }</script>

通过绑定修改样式方式修改：

<el-button :class="[selfbutton]">默认按钮</el-button><script>  export default {    data() {      return {        selfbutton: "self-button"      };    }   }</script><style lang="stylus" rel="stylesheet/stylus" scoped>.self-button {    color: white;    margin-top: 10px;    width: 100px;    background-Color: cadetblue;}</style>

5.总结

第一种全局引入 css 文件的方式，适合于对 elementUI 整体的修改，比如整体配色的修改；

第二种添加一个 style 标签的形式，也能够实现修改默认样式的效果，但实际上因为是修改了全局的样式，因此在不同的 vue 组件中修改同一个样式有可能会有冲突。

第三种方式通过 /deep/ 的方式可以很方便的在 vue 组件中修改默认样式，也不会于其他页面有冲突。

第四种方式局限性比较大，可以使用，但不推荐使用

如若转载，请注明出处：开源字节   https://sourcebyte.cn/article/262.html