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?
I tried it by the style and it's working perfectly, there should be some problem with your classes of styles, try this, it will work perfectly.
<Typography style={{ color: "blue" }} variant="h1">
A <span style={{ color: "red" }}>smart nation </span> approach to{" "}
<span style={{ color: "red" }}>safety.</span>
</Typography>
My suggestion is, on Typography you can try to use sx, so the code will like this:
<Typography sx={{ color: "blue" }} variant="h1">
A <span style={{ color: "red" }}>smart nation </span> approach to{" "}
<span style={{ color: "red" }}>safety.</span>
</Typography>