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

Question

我有一个antd直观的表，我发现所有表中的所有字体大小都相同。

我的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)"
  },

并且我希望以该行的字体提供的大小来渲染每一行。

Answer 1

只需使用Column.render property设置渲染行的样式即可。

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>
  );
}