修改步骤
-
寻找组件的API
-
无API可以添加className修改样式
-
上述两种形式无法改动则采取一下措施
-
打开控制台找到class名称
-
全局作用域
-
直接加global限定,由于antd是异步加载,所以一般找一个比较大的父级(比如所有元素都在body中)
-
.body :global(.ant-tree li .ant-tree-node-content-wrapper) { padding: 3px 5px 3px 0; }
-
-
局部作用域
-
只需要作用于你的小区域,那么就加一个外部距离较近的css来做限定
-
.body .block :global(.ant-tree li .ant-tree-node-content-wrapper) { padding: 3px 5px 3px 0; }
-
-
实际案例(需求)
1、table无数据时只展示表头
<Table
className={data?.length > 0 ? 'hasData' : 'noData'}
columns={columns}
dataSource={data}
/>
// 样式
.noData .ant-table-tbody {
display: none;
}