如何在 MUI v5 sx prop 中实现条件样式

IT技术 reactjs material-ui
2021-04-09 22:18:39

在 MUI5 的sxprop 中寻找巧妙的条件样式。我玩过的一个例子是：

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) }}
>

但我想知道是否有人想出了更优雅的东西？

2个回答

如果它只是一个带有原始键的简单映射，你可以使用一个对象：

const statusColors = {
  aborted: '#D66460',
  queue: '#6685F0',
  processing: '#F0E666',
}

sx={{ color: statusColors[job.status] ?? defaultColor }}

如果你想有条件地传递一个样式对象，你可以使用 spread 语法...，这就是 MUI 团队如何将样式应用于具有不同变体和状态的组件：

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,
  }),
}}
嗯，是的，这正是我所期望的。我认为错误来自我正在处理的项目的严格检查。
2021-05-27 22:18:39
当我尝试 statusColors[job.status] 之类的东西时，我得到 No index signature with a parameter of type 'string' was found on type '{ aborted: string; queue: string; processing: string; }
2021-05-31 22:18:39
@isea 可能是typescript错误，可以改成 statusColors[job.status as keyof statusColors]
2021-06-02 22:18:39
@isea 我不确定发生了什么。你能重现这个代码和盒子中的错误吗？它在那里工作正常。
2021-06-07 22:18:39
@isea 你可以在这里复制你的项目的 tsconfig看看有什么问题。
2021-06-09 22:18:39

使用他们的触发器

例如，在卷轴上：

import useScrollTrigger from '@mui/material/useScrollTrigger';

//...

const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 38,
});

//...

<Topbar
colorInvert={trigger ? false : colorInvert}/>
其它你可能感兴趣的问题
上一篇react router v6 在组件之外导航 下一篇如何让 SCSS 变量做出react