怎么修改 Element UI 的默认样式？修改 Element UI 默认样式后不生效怎么办？

怎么修改 Element UI 的默认样式？修改 Element UI 默认样式后不生效怎么办？一定是你的修改方式不对，整理了3种修改方法。

1. 新建全局样式表，并在 main.js 中引入。

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

2. 使用 /deep/ 深度修改

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

<style scoped>
/deep/ .el-cascader {
  width: 100%;
}
</style>

3. 单页面中添加一个新的style标签

新的style标签中不能添加scoped属性。在有写scoped的style标签中书写的样式不会覆盖 Element UI 默认的样式。所以此方法使用不当可能会造成全局样式污染的风险。

<style scoped>
// 其他样式
</style>

<style>
// 需要调整的 Element UI 样式
.el-cascader {
  width: 100%;
}

// 建议加上独特标签控制，避免全局样式污染。
.c-main .el-cascader {
  width: 100%;
}
</style>