修改antd vue组件a-table的默认样式

antd vue的组件固然简单好用，但是其默认样式有时是并不符合我们的需求的，我在开发过程中遇到一个问题：

• a-table表格padding过宽

如图所示

而我需要将这个表格进行打印，因此需要在保证样式美观的同时最大限度地利用纸张，所以我想把padding调小一点，这里就用到了vue的样式穿透。

        <a-table
          class="AStockOutDetailTable"
          style="margin-top: -5px;"
          :columns="stockOutDetailTable.columns"
          :data-source="stockOutDetailListForPrint"
          :pagination="false"
        />

1. sass和less的样式穿透 使用：（/deep/） 

<style lang="scss" scoped>
  .AStockOutDetailTable{
    & /deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
      padding: 8px 8px;
      overflow-wrap: break-word;
    }
    & /deep/ .ant-table-tbody .ant-table-row td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
</style>

2. stylus的样式穿透 使用：（>>>）

<style lang="stylus" scoped>
  .AStockOutDetailTable >>> .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
      padding: 8px 8px;
      overflow-wrap: break-word;
  }
  .AStockOutDetailTable >>> .ant-table-tbody .ant-table-row td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
</style>

3. 通用的样式穿透 使用：（::v-deep）

<style scoped>
  ::v-deep .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
      padding: 8px 8px;
      overflow-wrap: break-word;
  }
  ::v-deep .ant-table-tbody .ant-table-row td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
</style>

第三种方式，我在使用的时候会爆红，但是能起作用，或许有哪位前端大佬能给我这个后台开发小菜鸡解释一下~