reactjs 我如何根据他们的状态更改排版的背景？

snz8szmq 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(133)

如何根据状态的当前值更改文本的背景？
因此，目前的状态是pending，预设为黄色。
示例：值发生变化，变为complete。背景颜色应变为绿色。

<Typography sx={{padding:1, backgroundColor: 'yellow'}}>
       {recent.status}
</Typography>

看起来是这样的

1条答案

对于你所拥有的所有地位
用颜色Map状态：

const statusColor={
complete:'green',
pending:'yellow',
initiate:'blue',
}

无论您在何处获取此状态值recent.status，请使用此

<Typography sx={{padding:1, backgroundColor: statusColor[recent.status]}}>
       {recent.status}
</Typography>