在antd react表格中每行使用不同的字体大小

Question

我有一个用antd实现的简单的React表格，但我注意到所有表格中的字体大小都相同。

我的json文件中有不同的字体大小，如下所示：

 {
    "id": "29609-p3bse3294pj",
    "size": 32,
    "price": 806,
    "date": "Wed Jul 31 2019 05:50:53 GMT+0300 (Turkey Standard Time)"
  },
  {
    "id": "72738-axmupi8rnkb",
    "size": 23,
    "price": 370,
    "date": "Sat Jul 20 2019 18:22:35 GMT+0300 (Turkey Standard Time)"
  },

我希望能够根据提供的每行字体大小来呈现每一行。

- Hypothesis

---

你尝试了什么？ - Arthur

我已经阅读了相关文档，试图找到与此有关的任何样式属性，但是我没有成功找到。 - Hypothesis

你可能想要使用 rowClassName 并在 CSS 上创建样式列表。 - Arthur

Answer 1

只需使用Column.render属性即可为呈现的行样式进行设置。

const dataSource = [
  {
    id: '29609-p3bse3294pj',
    size: 32,
    price: 806
  },
  {
    id: '72738-axmupi8rnkb',
    size: 23,
    price: 370
  }
];

const columns = [
  {
    title: 'Price',
    dataIndex: 'price',
    key: 'id',
    render: (price, record) => (
      <Typography.Text style={{ fontSize: record.size }}>
        {price}
      </Typography.Text>
    )
  }
];

export default function App() {
  return (
    <FlexBox>
      <Table
        rowKey={record => record.id}
        dataSource={dataSource}
        columns={columns}
      />
    </FlexBox>
  );
}

- Dennis Vash