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

材质ui条件渲染样式

1 个答案: