我正在從 React material-ui 4 遷移到 MUI 5。
我如何使用新的styledAPI（或任何有意義的東西）實作這種型別的模式？
我正在使用打字稿。謝謝
const useStyles = makeStyles(theme => ({
topBar: {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: TRANSITION_DURATION,
}),
marginLeft: DRAWER_WIDTH,
},
topBarShift: {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
duration: TRANSITION_DURATION,
}),
marginLeft: 0,
},
}));
function Header({ drawer }: IHeader) {
const classes = useStyles();
...
return (
<div className={`${classes.topBar} ${!drawer && classes.topBarShift}`}>
...
</div>
);
}
uj5u.com熱心網友回復：
如果我清楚地理解您的問題，您只需要一個有條件的string.
這可以通過創建一個util可重用的函式來完成：
type ConditionalClasses = {
[className: string]: bool
}
const conditionalClass = (classes: ConditionalClass) =>
Object.keys(classes).reduce((combinedClassName, className) => classes[className] ? `${combinedClassName} ${className}` : combinedClassName, "")
用法如下
// Output: "a"
const newClassName = conditionalClasses({a: true, b: false})
或者，您可以使用clsx
- 編輯
看起來我誤讀了，因此誤解了這個問題。
如果你想有條件地使用styledAPI styles，你可以使用APIoverridesResolver提供的選項styled。
const CustomDivComponent = styled("div", {
overridesResolver: (props, styles) => {
// Do your conditional logic here.
// Return the new style.
return {};
}
})(({ theme }) => ({
// Your original styles here...
}));
可以在此處找到更多檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/369142.html