修改 element-ui 默认样式的两种方法

爱划水de鲸鱼哥～

已于 2022-04-14 23:20:00 修改

阅读量3.8k

点赞数 10

文章标签： javascript vue.js elementui 前端

于 2021-12-24 15:37:06 首次发布

本文链接：https://blog.csdn.net/m0_47901007/article/details/122126915

版权

本文介绍了两种修改element-ui默认样式的策略：一是通过删除 scoped 并利用父类命名空间来划分作用域，二是使用 /deep/ 深度选择器在保留 scoped 的情况下穿透作用域。同时，文章提到了注意事项，如避免父类命名冲突以及 append-to-body 属性可能导致的问题。

摘要由CSDN通过智能技术生成

首先，按下F12找到我们需要修改样式 DOM 对应的 class ;

在这里插入图片描述
然后，在原有的 style 标签后，新建一对style 标签并去掉 scoped 属性；（一个vue文件允许多对style 标签）

并在新建的style 标签中，修改element-ui 默认样式；

就像这样👇

<style scoped lang="less">
// 在此处编写组件样式
</style>

<style lang="less">
// 在此处修改 element-ui 默认样式
</style>

这时小伙伴们可能有疑问了，新建的style 标签没有 scoped 划分作用域，那不影响全局的默认样式了吗？

那么，重点来了；

我们可以在外面包上一层DOM并加上class，给我们修改的默认样式加上一个父类；

这样我们就可以通过父类对作用域进行划分；

就像这样👇，我们就可以修改 element-ui 默认样式啦！😉

<template>
    <!-- 样式命名空间 -->
    <div class="myClass">
 		<!-- element-ui 组件 -->
    <

关注