React Typography underline-CodePudding

How to make the Typography text underline like this

existing/ current code

        <Typography
          variant="p"
          sx={{ letterSpacing: '1.5px', marginLeft: '4px'  }}
        >
          Underline Text
        </Typography>

CodePudding user response：

If you want to use sx prop then you can use it with Box. Refer official documentation here.

Here's the working example of the same at codesandbox

import React from "react";
import ReactDOM from "react-dom";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

function App() {
  return (
    <Box
      component={Typography}
      variant="h3"
      sx={{ textDecoration: "underline" }}
    >
      hello
    </Box>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Alternatively, you can also pass typography property in the sx itself for the variant.