如何使用情感样式对MUI v5使用条件样式 [英] How to use conditional styles with MUI v5 using emotion styled
本文介绍了如何使用情感样式对MUI v5使用条件样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在从MUI v4迁移到v5。在v4中,我使用clsx
和TextField
来添加条件样式。
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
// ...
},
valid: {
"& fieldset": {
borderColor: theme.palette.success.main,
borderWidth: 2
}
}
})
);
const classes = useStyles();
<TextField
{...props}
className={clsx(classes.root, { [classes.valid]: isValid })}
/>
我正在尝试在MUI v5中找到类似的方法。除了clsx
和makestyles
之外,MUI v5中是否还有其他条件样式可供选择。
如果需要更多信息,请让我知道。
推荐答案
有多种方法可以做到这一点:
1.条件运算符
如果要基于布尔值有条件地设置属性,请使用此选项。
const Box1 = styled(Box, {
shouldForwardProp: (prop) => prop !== "showBorder"
})(({ showBorder }) => ({
border: showBorder ? "solid red 5px" : "none"
}));
<Box1 />
<Box1 showBorder />
2.词典
如果要基于多个值有条件地设置属性,请使用此选项。
import { styled, darken } from "@mui/material/styles";
const colors = {
hauntedForest: "#0b5b38",
redLust: "#b20608",
spaceExplorer: "#1244a1",
default: "#000000"
};
const Box2 = styled(Box, {
shouldForwardProp: (prop) => prop !== "variant"
})(({ variant }) => ({
backgroundColor: colors[variant] ?? colors.default,
border: "5px solid " + darken(colors[variant] ?? colors.default, 0.3)
}));
<Box2 variant="hauntedForest" />
<Box2 variant="redLust" />
<Box2 variant="spaceExplorer" />
<Box2 />
3.Short-circuit evaluation+扩散运算符
如果要有条件地设置多个属性,请使用此选项。
const Box3 = styled(Box, {
shouldForwardProp: (prop) => prop !== "isFancy" && prop !== "isFancyBorder"
})(({ theme, isFancy, isFancyBorder }) => ({
...(isFancy && {
borderRadius: theme.shape.borderRadius,
boxShadow: "0 4px 6px gray, 0 1px 3px rgba(0, 0, 0, 0.08)",
backgroundImage: "linear-gradient(90deg, #be5af7, #165b91)"
}),
...(isFancyBorder && {
backgroundColor: "transparent",
border: "5px solid transparent",
borderImage: "linear-gradient(90deg, #be5af7, #165b91)",
borderImageSlice: 1
})
}));
<Box3 isFancy />
<Box3 isFancyBorder />
以上所有方法在使用sx
props时也可以应用,因为它们使用JS对象来描述样式。
实时演示
这篇关于如何使用情感样式对MUI v5使用条件样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文