underline only half of the word in reactjs and material ui?

Question

This is what i am trying to recreate

This is what i have managed so far

I am using materialui and reactjs.This is the code.

bodyTitle: {
fontWeight: 800,
paddingTop: theme.spacing(5),
paddingBottom: theme.spacing(3),
color: "white",
display: "inline-flex",
flexGrow: 1,
width: "75%",
textDecoration: "underline",
textDecorationColor: "blue",

},

 <Typography variant="h4" className={classes.bodyTitle}>
    Upcoming
 </Typography>

How do Underline only half the word?

Answer 1

You can try below method

<span className={classes.Classname}>Up</span>coming 

.Classname{ textDecoration: "underline", textDecorationColor: "blue" }