如果它只是一个简单的Map，你可以使用一个对象：

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

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

如果要有条件地传递样式对象，可以使用扩展语法...，这是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,
  }),
}}

这似乎对我有用

const [emailStatus, setEmailStatus] = useState('');
  const [emailStatusText, setEmailStatusText] = useState('');
  const [isEmailSubmitted, setIsEmailSubmitted] = useState(false);

...

return response.json().then((data) => {
            const { success, error } = data;
            setEmailStatus(success ? 'success' : 'error');
            setEmailStatusText(success || error);
            return data;
          });

...

{isEmailSubmitted && (
              <Typography
                sx={{
                  textAlign: 'left',
                  color:
                    emailStatus === 'success'
                      ? theme.palette.success.main
                      : theme.palette.error.main,
                }}
              >
                {emailStatusText}
              </Typography>
            )}

对于希望使用屏幕大小作为条件的任何人，有一个简单的语法可用于修改样式：

<Box sx={{width: {md: MED_WIDTH, lg: LG_WIDTH, xl: XL_WIDTH}}}>
   ...
</Box>

使用他们的触发器

例如，在滚动条上：

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

//...

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

//...

<Topbar
colorInvert={trigger ? false : colorInvert}/>

常数a = 1;
常量homeStyle = {背景：“透明”，框阴影：“无”，位置：“绝对”，顶部：20、};
sx={a == 1？{背景：主页样式.背景}：{背景：“无”}}