antd组件如何修改默认样式（内含实际案例【欢迎补充】）

修改步骤

• 寻找组件的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;
}