最近使用antd写前端页面，想改变一下表格的默认样式，发现css改了但是没效果，后面搜了下得使用样式穿透来解决。
<a-card
class="progress"
:title="$t('progress')"
:bordered="false"
:body-style="{ padding: 0 }"
>
<a slot="extra">{{ $t("all") }}</a>
<div>
<standard-table
class="p-table"
:columns="columns"
:dataSource="dataSource"
:scroll="{ y: 150 }"
:pagination="false"
:size="small"
>
<div slot="description" slot-scope="{ text }">
{{ text }}
</div>
</div>
</a-card>less添加样式穿透：
.progress {
margin-bottom: 24px;
& /deep/ .ant-card-head {
border-bottom: none;
}
.p-table {
max-height: 200px;
margin-top: -32px;
& /deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 8px 8px 8px 12px;
overflow-wrap: break-word;
background: #fff;
font-size: 12px;
}
& /deep/ .ant-table-tbody .ant-table-row td {
padding-top: 8px;
padding-bottom: 8px;
font-size: 12px;
border: none;
}
}
}这样就可以看到改变后的效果了。
参考：
