typography variant in the Material UI

I am a new material UI, I am trying to use Typography, if I don't use variant in the typography tag, it is fine

<div className="login-details">
  <Typography>{details ? details.email : "N/A"} |</Typography>

  <Button type="link" onClick={()=> document.dispatchEvent(new CustomEvent("user.start_logout"))}>
              logout
            </Button>
</div>

if I use a variant like below, the UI is falling apart

<div className="login-details">
        <Typography variant="h2">{details ? details.email : "N/A"} |</Typography>

        <Button type="link" onClick={() => document.dispatchEvent(new CustomEvent("user.start_logout"))}>
          logout
        </Button>
      </div>

Please help me. Thanks in Advance.