如何在材质UI v5xprop中实现条件样式

Question

在Material UI v5的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) }}
>

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

Answer 1

如果它只是一个带有基本键的简单映射，则可以使用对象:

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

Answer 2

这似乎对我有用

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

Answer 3

根据SxProps声明，可以接受SystemStyleObject、一个函数或boolean|Function|SystemStyleObject的一个ReadonlyArray:

export type SxProps<Theme extends object = {}> =
| SystemStyleObject<Theme>
| ((theme: Theme) => SystemStyleObject<Theme>)
| ReadonlyArray<
boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)
>;

可以传递带有条件sx对象的数组，带有布尔值的条件数组元素将被忽略:

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 active = false;
<Alert
severity="info"
variant="outlined"
sx={[
{ borderWidth: 0 },
!active && { '& .MuiAlert-message': { color: 'text.disabled' } },
]}
>
Some message
</Alert>

Answer 4

对于想要使用屏幕大小作为条件的人来说，有一个简单的语法可以用来修改样式:

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

Answer 5

使用触发

例如:

import useScrollTrigger from '@mui/material/useScrollTrigger';
//...
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 38,
});
//...
<Topbar
colorInvert={trigger ? false : colorInvert}/>

Answer 6

const a = 1; 
const homeStyle = {
background: "transparent",
boxShadow: "none",
position: "absolute",
top: 20,
};
sx={a == 1 ? { background: homeStyle.background } : { background: "none" }}