Material ui 条件渲染样式

Question

我有 2 个网格，我希望其中一个为黑色背景，一个为白色背景，这两个背景都设置在 app.js 的主题中。如果我在第二个网格内传入一个白色标签道具，我想使用 theme.palette.common.black 或 theme.palette.common.white 。我尝试使用三元语句，但不知道如何实现它。

const styles = (theme) => ({
  root: {
    background: theme => theme.palette.common ? "black" : "white",
    // background: theme.palette.common.black,
    // background: theme.palette.common.white,
  },
});
const HomePage = ({ classes }) => (
  <>
    <FullScreenBanners>
      <Grid
        className={classes.root}
        container
        spacing={0}
        alignItems="center"
        justify="center"
        direction="column"
      >
        <Typography>iPhone SE</Typography>
        <Typography>From £10.99/mo. or £279 with trade-in.</Typography>
        <LearnMoreBuy />
        <img src="./images/iphone-se.jpg" />
      </Grid>
      <Grid
        white
        className={classes.root}
        container
        spacing={0}
        alignItems="center"
        justify="center"
        direction="column"
      >
        <Typography>iPhone 7</Typography>
        <Typography>From £7/mo. or £200 with trade-in.</Typography>
        <LearnMoreBuy />
        <img src="./images/iphone-se.jpg" />
      </Grid>
    </FullScreenBanners>
  </>
);

Answer 1

希望我没有误解你的问题。

只有两个不同的类——一个标准的（根）和一个用于白色背景的（例如白色）不是更容易吗？然后，您可以只应用第二个类名，而不是将“白色”道具传递给您的 Grid 元素之一。

    const useStyles = makeStyles({
      root: {
        background: theme.palette.common.black,
      },
      white: {
        background: theme.palette.common.white,
      },
    });

    const HomePage = () => {
      const classes = useStyles();

      return (
        <>
          <FullScreenBanners>
            <Grid
              //give this one just the root class
              className={classes.root}
              container
              spacing={0}
              alignItems="center"
              justify="center"
              direction="column"
            >
              <Typography>iPhone SE</Typography>
              <Typography>From £10.99/mo. or £279 with trade-in.</Typography>
              <LearnMoreBuy />
              <img src="./images/iphone-se.jpg" />
            </Grid>
            <Grid
              //give this one the root class and the white class
              className={`${classes.root} ${classes.white}`}
              container
              spacing={0}
              alignItems="center"
              justify="center"
              direction="column"
            >
              <Typography>iPhone 7</Typography>
              <Typography>From £7/mo. or £200 with trade-in.</Typography>
              <LearnMoreBuy />
              <img src="./images/iphone-se.jpg" />
            </Grid>
          </FullScreenBanners>
        </>
      );
    };