React: MUI Typography inline spacing

Consider this code snippet:

<Typography className={classes.welcomeMessage} variant="h1">
              A <span className={classes.redText}>smart nation </span> approach
              to <span className={classes.redText}>safety.</span>
</Typography>

Essentially I want to have one sentence, but some of the words in that sentence are of red colour. redText and welcomeMessage contain the same properties except for the fact that the colour is different. However, the text comes up like this:

Asmart nationapproach tosafety.

I presume the span component is messing with the spacing. Is there an easy fix or ideal way of dealing with this?