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

以表格(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'
/>