迁移到Material-UI v5时，如何处理条件类？

In the 官方迁移指南 https://next.material-ui.com/guides/migration-v4/#main-content，他们给出了以下从 JSS 更改代码的示例（makeStyles）到新的styled mode.

Before:

const useStyles = makeStyles((theme) => ({
    background: theme.palette.primary.main,
}));

function Component() {
    const classes = useStyles();
    return <div className={classes.root} />
}

After:

const MyComponent = styled('div')(({ theme }) => 
    ({ background: theme.palette.primary.main }));

function App(props) {
    return (
        <ThemeProvider theme={theme}>
            <MyComponent {...props} />
        </ThemeProvider>
    );
}

对于单个类来说这很好，但是当代码中有条件类时该怎么办？

e.g.

<main className={classnames(content, open ? contentOpen : contentClosed)}>
    {/* content goes here */}
</main>

Here, content, contentOpen, and contentClosed类是从返回的useStyles, but contentOpen and contentClosed根据以下值有条件地呈现open.

随着新styled方法，我们不是生成类名，而是生成组件。有没有一种方法可以优雅地复制渲染，而无需在三元表达式中进行内容重复？

e.g. we don't想做类似的事情：

function App(props) {
    return (
        <ThemeProvider theme={theme}>
            {open
            ? <MyOpenComponent {...props}>{/* content */}</MyOpenComponent>
            : <MyClosedComponent {...props}>{/* content */}</MyClosedComponent>
        </ThemeProvider>
    );
}

有很多可能的方法来处理这个问题。一种方法使用styled是利用 props 来做动态样式而不是尝试使用多个类。

这是一个例子：

import React from "react";
import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";

const StyledDiv = styled("div")(({ open, theme }) => {
  const color = open
    ? theme.palette.primary.contrastText
    : theme.palette.secondary.contrastText;
  return {
    backgroundColor: open
      ? theme.palette.primary.main
      : theme.palette.secondary.main,
    color,
    padding: theme.spacing(0, 1),
    "& button": {
      color
    }
  };
});

export default function App() {
  const [open, setOpen] = React.useState(false);
  return (
    <StyledDiv open={open}>
      <h1>{open ? "Open" : "Closed"}</h1>
      <Button onClick={() => setOpen(!open)}>Toggle</Button>
    </StyledDiv>
  );
}

这是使用 TypeScript 的等效示例：

import * as React from "react";
import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";

const StyledDiv: React.ComponentType<{ open: boolean }> = styled("div")(
  ({ open, theme }) => {
    const color = open
      ? theme.palette.primary.contrastText
      : theme.palette.secondary.contrastText;
    return {
      backgroundColor: open
        ? theme.palette.primary.main
        : theme.palette.secondary.main,
      color,
      padding: theme.spacing(0, 1),
      "& button": {
        color
      }
    };
  }
);

export default function App() {
  const [open, setOpen] = React.useState(false);
  return (
    <StyledDiv open={open}>
      <h1>{open ? "Open" : "Closed"}</h1>
      <Button onClick={() => setOpen(!open)}>Toggle</Button>
    </StyledDiv>
  );
}

其他一些可能的方法：

• 使用情感cssprop 和 Emotion 的能力作曲风格 https://emotion.sh/docs/composition
• Use tss-反应 https://github.com/garronej/tss-react保留类似的语法makeStyles但由 Emotion 支持（因此您不会在捆绑包中同时包含 Emotion 和 JSS，如果您利用makeStyles from @material-ui/styles）。这是我迁移到 v5 时采取的路线，作为迁移的一部分，我创建了一个codemod https://mui.com/material-ui/guides/migration-v4/#2-use-tss-react用于迁移 JSSmakeStyles到 tss-react 的makeStyles.