第三方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属性的取值,来改变外观样式

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组件库内部的样式情况。

相关推荐
weixin_4093831220 小时前
cocos 用widget将ui组件固定在屏 随着分辨率自适应 编辑器界面canvas作为手机屏参考 将ui组件放进去 deepseek解答
ui·cocos
Hi202402171 天前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
紫薯馍馍2 天前
Adobe Photoshop 2025(Ps2025)下载安装教程
ui·adobe·photoshop
兰亭妙微3 天前
2026年UX/UI五大趋势:AI、AR与包容性设计将重新定义用户体验
开发语言·ui·1024程序员节·界面设计·设计趋势
摘星编程3 天前
【参赛心得】HarmonyOS创新赛获奖秘籍:如何用Stage模型和声明式UI打造高分作品
ui·华为·harmonyos·鸿蒙开发·stage模型
知识分享小能手4 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
Aevget4 天前
界面控件Kendo UI for Angular 2025 Q3亮点 - 全新的AI编码助手
ui·界面控件·kendo ui·ui开发·1024程序员节
油炸自行车5 天前
【Qt】VS Code配置Qt UI插件,vscode打开Qt Designer ,vscode打开Qt*.ui文件
qt·ui·cursor·qt designer·vscode插件·trae·qt ui
程序员小远5 天前
Appium+python+unittest搭建UI自动化框架
自动化测试·软件测试·python·测试工具·ui·appium·测试用例
尤老师FPGA6 天前
LVDS系列32:Xilinx 7系 ADC LVDS接口参考设计(三)
android·java·ui