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

本文介绍: 由于UI组件库内部的样式我们不是完全清楚，所以，以上方法，都可以尝试，那种方式可以，就用那种。其实，你可以打开 chrome 浏览器的元素（elements），查看不同组件的内部标签结构和样式，先做做尝试，再在代码中写，同时，也能够了解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–bu t on组件，可以通过修改type 属性的取值，来改变外观样式

&lt;el-button type="primary"&gt;按钮&lt;/el-button&gt;

3、添加 class/style

&lt;el-button type="success" class="mybutton" style="height: 250px;"&gt;按钮</el-button&gt;


<style lang="css" scoped&gt;

.mybutton{
    border-radius: 20px;
}
    
</style&gt;

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

.m y butto n{ border–radius: 20px !important; }

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

<el-button type="success" class="mybutton" style="height: 250px;"&gt;按钮</el-button&gt;

<style lang="css" scoped&gt;

.mybutton{
    border-radius: 20px;
}

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

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

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

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

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

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

<template>
    <el-table class="mytable" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </template>
  
  <script  setup>
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    }
  ]
  </script>

<style scoped>

.mytable >>> .el-table_1_column_1  .cell{
    background-color: red;
}

</style>

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

/deep/ .a{

    ***

}

sass和less的写法：

<style lang="scss" scoped>
.a{
  /deep/ .b { 
  /* ... */
 }
}
</style>

scope d 影响（不加scope d,deep不生效）

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

::v-deep .a{

    ***

}

示例代码：

<el-button type="success" class="mybutton" style="height: 250px;">按钮</el-button>

<style lang="css" scoped>

.mybutton{
    border-radius: 20px;
}

::v-deep .el-button span{
    width: 100px;
    height: 30px;
    background-color: aqua;
}

.el-button{
    width: 600px;
}

</style>


sass和less的写法：

<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
</style>