第三方UI组件库的样式修改

一、场景：

       一般来说，我们在使用第三方UI组件库（如：vant，element-plus等）时，UI组件库自带的样式不能满足用户的个性化需求时，就需要我们开发人员自己动手对组件库的局部样式进行修改。

二、修改UI组件库的顺序和方法

1、修改主题

1、修改主题：每个ui组件库都有专门的修改主题的解释，如vant。Vant 3 - Lightweight Mobile UI Components built on Vue

2、使用props

如：element-plus的el-buton组件，可以通过 修改type属性的取值，来改变外观样式

按钮

3、添加 class/style

​

按钮
​
​

如果某个属性覆盖不了，就加属性的权重

.mybutton{ border-radius: 20px !important; }

4、查看元素，查询相关样式名，修改编译后的样式

按钮
​

5、样式穿透（覆盖ui组件库的样式名）

1）、 .a >>> .b { /* ... */ } 深度选择器；

如果实在不行的话，可以考虑给外面加一个容器

即： 自定义的样式名 >>> ui组件库的样式名

注意：这个写法sass和less不支持。

  
  
​

2）、 /deep/ ui组件选择器 { }

/deep/ .a{
​
    ***
​
}

sass和less的写法：

scoped 影响 （不加scoped,deep不生效）

3）、::v-deep ui组件选择器 { }

::v-deep .a{
​
    ***
​
}

示例代码：

按钮
​



sass和less的写法：

/deep/在某些时候会报错，::v-deep更保险并且编译速度更快.

三、最后

由于UI组件库内部的样式我们不是完全清楚，所以，以上方法，都可以尝试，那种方式可以，就用那种。

其实，你可以打开chrome浏览器的元素（elements），查看不同组件的内部标签结构和样式，先做做尝试，再在代码中写，同时，也能够了解UI组件库内部的样式情况。