怎么修改 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>
版权声明:本文为原创文章,转载请附上原文出处链接和本声明。
本文链接://www.oneue.com/articles/1840.html