Как настроить высоту строки таблицы в Antd?

Question

Antd поставляется с компонентом таблицы nices, но я не могу найти ничего в документах о том, как настроить «плотность» таблицы, т. Е. Высоту строки таблицы по умолчанию и, возможно, также размер шрифта.

По умолчанию таблица имеет просторный макет:

У меня есть сценарий использования, который требует меньшего размера / плотные строки (подумайте о плотности в типичных программах для работы с электронными таблицами, таких как 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;
}