import React from
"react"
;
import Box from
"@mui/material/Box"
;
import Typography from
"@mui/material/Typography"
;
function
App() {
return
(
<div>
<div style={{ textAlign:
"center"
, color:
"green"
}}>
<h1>GeeksforGeeks</h1>
<h2>React MUI Typography Display</h2>
</div>
<center>
<Box sx={{ maxWidth: 800 }}>
<Typography variant=
"h1"
gutterBottom>
GeeksforGeeks
</Typography>
<Typography variant=
"h2"
gutterBottom>
GeeksforGeeks
</Typography>
<Typography variant=
"h3"
gutterBottom>
GeeksforGeeks
</Typography>
<Typography variant=
"h4"
gutterBottom>
GeeksforGeeks
</Typography>
<Typography variant=
"h5"
gutterBottom>
GeeksforGeeks
</Typography>
<Typography variant=
"h6"
gutterBottom>
GeeksforGeeks
</Typography>
<Typography variant=
"subtitle1"
gutterBottom>
GFG Premium
</Typography>
<Typography variant=
"subtitle2"
gutterBottom>
GFG Premium
</Typography>
<Typography variant=
"body1"
gutterBottom>
GeeksforGeeks provides Free Tutorials,
Millions of Articles, Live, Online and
Classroom Courses ,Frequent Coding
Competitions ,Webinars by Industry
Experts, Internship opportunities
and Job Opportunities.
</Typography>
<Typography variant=
"body2"
gutterBottom>
GeeksforGeeks provides Free Tutorials,
Millions of Articles, Live, Online and
Classroom Courses ,Frequent Coding
Competitions ,Webinars by Industry
Experts, Internship opportunities
and Job Opportunities.
</Typography>
<Typography variant=
"button"
display=
"block"
gutterBottom>
button
</Typography>
<Typography variant=
"caption"
display=
"block"
gutterBottom>
caption
</Typography>
<Typography variant=
"overline"
display=
"block"
gutterBottom>
Overline
</Typography>
</Box>
</center>
</div>
);
}
export
default
App;