gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 16:22:53 25 4
gpt4 key购买 nike

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

并且我希望按照为该行的字体提供的大小分别呈现每一行。

最佳答案

只需使用 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>
);
}

Edit styled-antd-react-starter

关于reactjs - 在antd react表的每一行中使用不同的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57347989/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com