Material ui conditional rendering styles

Question

I have 2 grids and I want one of them to be a black background and one to be a white background, both of these backgrounds are set in a theme in the app.js. Im wanting to use theme.palette.common.black or theme.palette.common.white if i pass in a white tag prop inside the second grid. Im trying to use a ternary statement but not sure how to implement it.

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

I hope I haven't misunderstood your question.

Wouldn't it be easier to just have two different classes - a standard one (root) and one for the white background (e.g. white)? Then, instead of passing in a 'white' prop to one of your Grid elements, you can just apply the second class name.

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