![](/img/trans.png)
[英]MUI v5: Do I need to install @emotion/react or @emotion/styled to use sx prop?
[英]How to use conditional styles with MUI v5 using emotion styled
我正在從 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 中的條件樣式是否有任何替代方法。
如果需要更多信息,請告訴我。
有多種方法可以做到這一點:
如果要根據布爾值有條件地設置屬性,請使用此選項。
const Box1 = styled(Box, {
shouldForwardProp: (prop) => prop !== "showBorder"
})(({ showBorder }) => ({
border: showBorder ? "solid red 5px" : "none"
}));
<Box1 />
<Box1 showBorder />
如果您想根據多個值有條件地設置屬性,請使用此選項。
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 />
如果您想有條件地設置多個屬性,請使用此選項。
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
道具時應用,因為它們使用 JS 對象來描述樣式。
這似乎對我有用
使用 sx
sx={{ px: variable ? 8 : null }}
帶斷點的 sx
sx={{ px: { md: variable ? 8 : null } }}
支柱
<Typography align={variable ? 'center' : 'inherit'}>
使用類名
className={ variable ||'class-name'}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.