The Material-UI Typography component is excellent for styling text within a layout. We can quickly add font style, font weight, and text overflow styling.
In this MUI Typography tutorial, I will create a Typography component with default styling and then add italic, bold, and ellipses to it.
Full React code for this example is in the Resources section.
View a video version of this post on YouTube or watch below:
Material-UI Typography Italic Text
The MUI Typography component can have its text italicized with one simple styling addition: fontStyle: 'italic' in the sx prop.
<Typography sx={{fontStyle: 'italic'}}>Styled Typography Text</Typography>Remember that this is JSS syntax. It’s the same as font-size: italic in pure CSS.
Material-UI Typography Bold Text
If you need the text to be bold, simply add fontWeight: 'bold' to the sx prop.
<Typography sx={{fontWeight: 'bold'}}>Styled Typography Text</Typography>This is the same as font-weight: 700.
Material-UI Typography with Ellipses
The MUI team added a nice shorthand prop called noWrap for setting ellipses on the Typography component:
<Typography noWrap>Styled Typography Text</Typography>This actually adds three CSS styles to the component: overflow: hidden, text-overflow: ellipses, and white-space: nowrap. All three of these are required in order to add ellipses.
Try reducing the font size if your text is too big for the Typography.
FAQs
MUI Typography font can be changed by adding a fontFamily value to the sx prop. Here is example code: <Typography sx={{fontFamily: ['Lucida Console']}}>My Text</Typography>.
Another method is to override the Typography value in the theme.
MUI Typography font weight can be set to bold by adding fontWeight: bold value to the sx prop. Here is example code: <Typography sx={{fontWeight: 'bold'}}>My Text</Typography>.
Resources
Here are additional useful posts related to the MUI Typography component:
- How to Use MUI Typography (Plus Strikethrough and Font Size)
- How to Align MUI Typography (Vertically/Center/Right/Left)
- The Ultimate Guide to the Material-UI Theme Object: Breakpoints, Overrides, Shadows, Typography, and More
- How to Set MUI Text Color
import Typography from "@mui/material/Typography";
const typographyStyling = {
borderRadius: 2,
border: '1px solid',
borderColor: 'secondary.main',
backgroundColor: 'green',
padding: 6,
margin: 12,
fontSize: 24,
fontWeight: 'bold',
fontStyle: 'italic',
maxWidth: 200,
}
export default function AlignedTypography() {
return (
<Typography noWrap sx={{...typographyStyling}}>Styled Typography Text</Typography>
);
}