[material-ui] When a toast displays, all text on my page gets slightly larger

[stuckinaboot]

First I'd like to say I'm a huge fan of this module. However, an issue I'm having is when a toast displays using cogo-toast that all of the text on my page gets slightly larger. When the toast dismisses, the text goes back to its original size. Any reason why this occurs? Any way to get around this?

To reproduce, have some existing text on your page and then display a toast. Worth noting, I am using materialui so maybe there's some issue with that + cogo-toast interacting?

[stuckinaboot]

I've narrowed this down to the culprit being the Typography component when using material-ui.

[stuckinaboot]

This is the code I used for the body of the alert to allow for customization with a button but to get around the constraint of cogo-toast not placing nicely with Typography in material-ui:

<Grid container style={{ fontSize: 16 }}>
      <Grid item xs={12}>
        Some body text
        {button != null ? (
          <Box
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              width: "100%",
            }}
          >
            <Box
              style={{
                backgroundColor: "grey",
                padding: 10,
                fontWeight: "bold",
              }}
              onClick={()=>{
                 // do something
              }}
            >
              Button title text
            </Box>
          </Box>
        ) : null}
      </Grid>
    </Grid>,