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>

How to hide Material UI Button?

1 Answers1