如何在MUI v5 SX属性中实现条件样式 [英] How to implement conditional styles in MUI v5 sx prop

问题描述

在MUI5的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屋！