React material-ui (MUI) 5 个条件 CSS 类

Question

我正在从 React material-ui 4 迁移到 MUI 5。

如何使用新的styled API（或任何有意义的方法）实现这种模式？

我正在使用 Typescript。

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

Answer 1

如果我清楚地理解你的问题，你只需要一个条件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

-- 编辑

看来我读错了，因此误解了这个问题。

如果您想有条件地使用styled API styles，可以使用styled API 提供的overridesResolver 选项。

const CustomDivComponent = styled("div", {
  overridesResolver: (props, styles) => {
    // Do your conditional logic here.
    // Return the new style.
    return {};
  }
})(({ theme }) => ({
  // Your original styles here...
}));

更多文档可以找到here