如何在MUI v5 SX属性中实现条件样式 [英] How to implement conditional styles in MUI v5 sx prop
本文介绍了如何在MUI v5 SX属性中实现条件样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
sx
属性中寻找巧妙的条件样式。我使用过的一个例子是:
const statusStyle = (status) => {
switch (status) {
case "aborted":
return "#D66460";
break;
case "queue":
return "#6685F0";
break;
case "processing":
return "#F0E666";
break;
default:
return "#60D660";
}
};
<TableRow
key={job.job}
sx={{ color: statusStyle(status) }}
>
但是我想知道是不是有人想出了更优雅的东西?
推荐答案
如果只是带有原始键的简单映射,您可以使用Object:
const statusColors = {
aborted: '#D66460',
queue: '#6685F0',
processing: '#F0E666',
}
sx={{ color: statusColors[job.status] ?? defaultColor }}
如果要有条件地传递Style对象,可以使用扩展语法...
,MUI团队apply the styles对不同变体和状态的组件:
sx={{
color: defaultColor,
backgroundColor: defaultBgcolor,
...(job.status === 'aborted' && {
color: color1,
backgroundColor: bgcolor1,
}),
...(job.status === 'queue' && {
color: color2,
backgroundColor: bgcolor2,
}),
...(job.status === 'processing' && {
color: color3,
backgroundColor: bgcolor3,
}),
}}
这篇关于如何在MUI v5 SX属性中实现条件样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文