一、场景:
一般来说,我们在使用第三方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属性的取值,来改变外观样式
html
<el-button type="primary">按钮</el-button>
3、添加 class/style
html
<el-button type="success" class="mybutton" style="height: 250px;">按钮</el-button>
<style lang="css" scoped>
.mybutton{
border-radius: 20px;
}
</style>
如果某个属性覆盖不了,就加属性的权重
.mybutton{ border-radius: 20px !important; }
4、查看元素,查询相关样式名,修改编译后的样式
html
<el-button type="success" class="mybutton" style="height: 250px;">按钮</el-button>
<style lang="css" scoped>
.mybutton{
border-radius: 20px;
}
.el-button{
width: 600px;
}
</style>
5、样式穿透(覆盖ui组件库的样式名)
1)、 .a >>> .b { /* ... */ } 深度选择器;
如果实在不行的话,可以考虑给外面加一个容器
即: 自定义的样式名 >>> ui组件库的样式名
注意:这个写法sass和less不支持。
html
<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组件选择器 { }
html
/deep/ .a{
***
}
sass和less的写法:
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
scoped 影响 (不加scoped,deep不生效)
3)、::v-deep ui组件选择器 { }
html
::v-deep .a{
***
}
示例代码:
html
<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>
/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.
三、最后
由于UI组件库内部的样式我们不是完全清楚,所以,以上方法,都可以尝试,那种方式可以,就用那种。
其实,你可以打开chrome浏览器的元素(elements),查看不同组件的内部标签结构和样式,先做做尝试,再在代码中写,同时,也能够了解UI组件库内部的样式情况。