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

【问题标题】：Using different font size in each row in antd react table在 antd react 表的每一行中使用不同的字体大小
【发布时间】：2019-08-04 15:46:37
【问题描述】：

我有一个 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)"
  },

我希望按照为该行的字体提供的大小来渲染每一行。

【问题讨论】：

你尝试了什么？
我已阅读文档以找到与此相关的任何样式道具，但我没有成功找到。
您可能想使用rowClassName 并在 CSS 上创建样式列表

标签： reactjs antd

【解决方案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>
  );
}

【讨论】：