vue项目，如何修改Element-Plus等UI组件库的样式，三种方式搞定！！！

不念不忘少年蓝@ 2024-03-24 22:45 2阅读 0赞

## 前言 ##

我们在学习和使用组件库构建页面的时候，时常会遇到这样的问题。  
即，尽管组件库已经提供了较多的功能，来帮助我们构建自定义的效果，但有时仍不能使我们满意。  
这个时候我们就不得不修改UI库的样式，来达到想要的状态。  
以Element-Plus为例，在Vue3中，主要有三种方式可以实现自定义第三方组件库的样式。

## 项目背景 ##

例如，我希望调节Element-Plus中的Autocomplete（自动补全输入框） 组件的输入框宽度，但是查看文档，却发现官方并没有提供这样的接口。  
这个时候，我就不得不手动的查看组件的HTML实现，并且对样式进行调整。  
首先F12来查看其HTML源码，如下所示。  
![源码][6f22d15929b64b77953ecd076cee225c.png_pic_center]  
这时候我们可以快速发现需要调整样式的div层，然后在Vue项目中通过三种方式进行调整。

## 实现方式 ##

### 全局样式 ###

默认的`<style>`标签中的样式就是全局样式，这意味着，其中的任何样式都会对整个项目生效，因此需要谨慎使用。

<style>
    .el-input__wrapper {
          
        width: 600px
    }
    </style>

### 全局选择器`:global(）` ###

全局选择器的效果和全局样式基本一致，但是它可以被用在`<style scoped>`中，这样你的组件中既能够定义非全局的样式，又能定义全局样式。

<style scoped>
    :global(.el-input__wrapper) {
          
        width: 600px
    }
    </style>

### 深度选择器（推荐） ###

深度选择器可以用于定义子组件的专属样式，不易发生冲突。因而相对于前两种定义全局样式的方式更加合适。

<style scoped>
    :deep(.el-input__wrapper) {
          
        width: 600px
    }
    </style>

[6f22d15929b64b77953ecd076cee225c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fb120218f98e4d49a1722fe2502c57cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-——UI组件库使用

目录一、常用组件库 1.移动端常用UI组件库 2.PC端常用UI组件库二、以Element UI （饿了么为例）三、Element-UI 按需引入（关心引入组

本是古典何须时尚/ 2024年04月06日 12:04/ 0 赞/ 106 阅读

相关 js修改标签样式的8种方式，5分钟就能搞定

![8be4256929d8ec1ebfef8845121eb72e.png][] 1.直接设置style的属性某些情况用这个设置 !important值无效如果属性有

系统管理员/ 2023年10月08日 21:16/ 0 赞/ 3 阅读

相关 vue常用的UI组件库

1、移动端常用的UI组件库 1. Vant https://youzan.github.io/vant 2. Cube UI https://didi.github.

蔚落/ 2023年10月02日 22:25/ 0 赞/ 21 阅读

相关 Vue组件中引入CSS样式的三种方式

直接上菜： <template> <div class='test'> <img class='test_img' :src="requi

电玩女神/ 2023年09月30日 17:23/ 0 赞/ 19 阅读

相关 Vue引入Element-ui组件库

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、全局引入二、按需引入 -----------------

你的名字/ 2023年09月26日 18:04/ 0 赞/ 89 阅读

相关 Vue引入并使用Element-UI组件库的两种方式

前言在开发的时候，虽然我们可以自己写css或者js甚至一些动画特效，但是也有很多开源的组件库帮我们写好了。我们只需要下载并引入即可。 vue和element-ui在开

喜欢ヅ旅行/ 2023年09月23日 21:55/ 0 赞/ 125 阅读

相关修改Element-ui组件的样式无效？

框架vue2.0，使用element中自有些组件样式不合心意，但是在style中改不过来？ 1，想将某个组件样式全局统一，通过控制台f12查看组件类名，在App.vue的s

缺乏、安全感/ 2023年06月24日 04:47/ 0 赞/ 221 阅读

相关 vue 常用ui组件库

vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github

- 日理万妓/ 2023年01月10日 10:28/ 0 赞/ 158 阅读

相关 vue 常用ui组件库

vux github ui demo:[https://github.com/airyland/vux][https_github.com_airyland_vux] Mi

Myth丶恋晨/ 2022年06月04日 01:24/ 0 赞/ 274 阅读

相关用vue的UI组件库搭建项目

1.使用vant(一款vue的UI组件库) cnpm i -g @vue/cli-init // 安装脚手架 vue init webpa

Dear 丶/ 2021年10月19日 11:46/ 0 赞/ 313 阅读