解决Ant-Design-vue(antdv)单独设置某个组件的样式,不污染全局(less预处理器)

最新推荐文章于 2023-03-09 15:53:53 发布

原创最新推荐文章于 2023-03-09 15:53:53 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #css

前端(vue) 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Ant-Design-vue(antdv)中，针对特定组件设置样式，避免影响全局样式。通过加外层容器并利用/deep/选择器，或直接给组件定义类，可以实现对表格(table)的样式定制，如改变头部颜色、行间隙等，同时列举了一些常用的table属性，如鼠标悬停时的行颜色改变。

以表格(table)为例,我想只更改某个界面的表格头部颜色或者表格行间隙,行颜色等

一.加外层容器

首先找到此组件最近的一个外层容器,下面是一个最简单的示例

<div class='main-container'>
    <a-table/>
</div>

此时table的外层容器为main-container,要想设置table内部的样式,只需要如下

.main-container{
  //表格头部颜色
  /deep/ .ant-table-thead>tr>th{
    background-color: rgb(28, 59, 80);
  }
  //表格内容空时的颜色
  /deep/ .ant-table-placeholder{
    background-color: darkmagenta;
  }
}

注意/deep/必不可少,此时我们就更改了表格头部的颜色以及表格空白时的颜色

二.给组件定义类

有一种情况是我们设计的界面并没有外层容器,自己也不想加一层包裹,那么我们可以直接给table一个类,然后再使用上面的方法

<a-table
    class='table-data'
/>

.table-data{
  //表格头部颜色
  /deep/ .ant-table-thead>tr>th{
    background-color: rgb(28, 59, 80);
  }
  //表格内容空时的颜色
  /deep/ .ant-table-placeholder{
    background-color: darkmagenta;
  }
}

效果跟第一种方法是一样的

三.记录一些常用的table属性

1.鼠标放上时的行颜色

.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: #e6f7ff;
}