修改Element-UI样式的几种方式

最新推荐文章于 2024-08-02 23:25:51 发布

Mr.指尖舞者

最新推荐文章于 2024-08-02 23:25:51 发布

阅读量1.3w

点赞数 10

分类专栏： vue面试题文章标签： elementui vue.js vue 前端框架

本文链接：https://blog.csdn.net/qq_56989560/article/details/124145614

版权

vue面试题专栏收录该内容

5 篇文章 21 订阅

订阅专栏

本文介绍了四种修改Element-UI样式的常见方法：全局样式表、局部样式、使用/deep/穿透作用域以及内联样式。通过这些方式，开发者可以在Vue项目中灵活定制Element-UI组件的外观，避免样式冲突并确保样式生效。

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

修改Element-UI样式一共有四种方式。

1.新建全局样式表

新建global.css全局样式文件，并在main,js中进行引用

import './style/global.css'

在全局样式下的样式会覆盖vue中单页面中element-ui样式。

2.在当前vue页面下新建style标签

在当前style下不要使用scoped属性，在写有scoped属性不会覆盖element-ui样式

3.使用/deep/进行深度修改样式

找到需要修改的样式的标签名的类名，在类名前加/deep/,这种方式可以强制修改element-ui样式，，可直接用到加了scoped属性的style节点下。

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

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

不是用通用例如

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

扩展：

第一种全局引入css文件的方式，适合于对elementUI整体的修改，比如整体配色的修改；
第二种添加一个style标签的形式，也能够实现修改默认样式的效果，但实际上因为是修改了全局的样式，因此在不同的vue组件中修改同一个样式有可能会有冲突。
第三种方式通过 /deep/ 的方式可以很方便的在vue组件中修改默认样式，也不会于其他页面有冲突。
第四种方式局限性比较大，可以使用，但不推荐使用。