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

2023-09-05原创,版权声明见本文尾部

【双12】主会场 低至1折

怎么修改 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>

 

收藏

提示信息