Antd中如何自定义表格行高？

Question

Antd 附带了一个很好的表格组件，但我在文档中找不到有关如何配置表格“密度”的任何内容，即表格行的默认高度，也许还有字体大小。

默认情况下，表格具有空间布局：

我有一个用例，需要更小/更密集的行（想想典型的电子表格程序（如 Excel）中的密度）。

我是 Antd 的新手，我不知道从哪里开始。我需要定制 Antd 的 CSS 吗？实现它的正确机制是什么，在单元格或行级别配置高度，或者更确切地说弄乱填充？我选择 Antd 是因为我希望这样的事情不需要太多 CSS 知识，我是否错过了什么？

Answer 1

你可以Tag从 css 设计你的样式。如果你想要风格antd table，那么你应该瞄准antd类。

const columns =[
...
{
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: tags => (
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag} className="my-tag">
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    )
  },
...
]

CSS

/* table */
.ant-table {
  font-size: 9px;
}

/* row data */
.ant-table-tbody > tr > td {
  height: 5px;
  padding: 4px;
}
/* row tags */
.my-tag {
  font-size: 12px;
}
.ant-table-thead > tr > th {
  height: 5px;
  padding: 4px;
}

Answer 2

我在这里遇到同样的问题，根据@blueseal 的回答，我用 Styled-Components 这样做了我的行高！

我的JSX

 <MyTable rowKey="id" dataSource={list} columns={columns} /> 

我的CSS

import { Table } from 'antd'

export const MyTable = styled(Table)`
  tbody {
    tr {
      td {
        height: 5px;
        padding: 4px;
      }
    }
  }
`

我希望能帮助别人！