React Material UI Typography underline

Question

how can I make text with underlining without having enter or a new line?

   <Typography sx={{ 
          top: '104px',
          fontFamily: 'Roboto',
          fontStyle: 'normal',
          fontWeight: 'normal',
          lineHeight: '24px',
          fontSize: '16px',
          letterSpacing: '0.18px',
          color: '#172B4D',
          margin: '16px 0px'
       }}>
      The big brown fox jumps over the <Typography sx={{textDecoration: 'underline'}}>lazy </Typography> dog
      </Typography>

Answer 1

Just add display="inline"

<Typography sx={{ 
          top: '104px',
          fontFamily: 'Roboto',
          fontStyle: 'normal',
          fontWeight: 'normal',
          lineHeight: '24px',
          fontSize: '16px',
          letterSpacing: '0.18px',
          color: '#172B4D',
          margin: '16px 0px'
       }}>
      The big brown fox jumps over the <Typography sx={{textDecoration: 'underline'}} display="inline">lazy </Typography> dog
      </Typography>