How to hide Material UI Button?

Question

I want to hide this material UI button if user is logged in but cant do conditional rendering because it will mess up the whole display flex items so i just want to do display none, is it possible to do display none conditionally?

        <Button
      variant="contained"
      color="primary"
      size="large"
      style={{ paddingLeft: "50px", paddingRight: "50px" }}
      className={classes.primaryAction}
    >
      {content["login"]}
    </Button>

Does this answer your question? [Correct way to handle conditional styling in React](https://stackoverflow.com/questions/35762351/correct-way-to-handle-conditional-styling-in-react) — Samball, May 05 '22 at 07:28

score 1 · Answer 1 · answered May 05 '22 at 07:27

yes it is possible, but I belive you will hit the very same issue, it it dissapears, it will break your flex anyways, but you can try this.

   <Button
      variant="contained"
      color="primary"
      size="large"
      style={{ paddingLeft: "50px", paddingRight: "50px", display: isLoggedIn ? "none" : "block" }}
      className={classes.primaryAction}
    >
      {content["login"]}
    </Button>

score 0 · Answer 2 · answered Jun 29 '23 at 03:05

The way to do it without affecting your flex items or so, is setting the display attribute as 'none' only when you want to hide it and nothing if you want it to be displayed:

<Button
  variant="contained"
  color="primary"
  size="large"
  sx={{ paddingLeft: "50px", paddingRight: "50px", display: isLoggedIn && 'none' }}
  className={classes.primaryAction}
>
    {content["login"]}
</Button>

How to hide Material UI Button?

2 Answers2