How to Make MUI Typography Text Italic, Bold, or With Ellipses

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.

MUI Typography with Italic and Bold Text (plus ellipses)
MUI Typography with Italic and Bold Text (plus ellipses)

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:

Styling MUI Typography - Italics, E...
Styling MUI Typography - Italics, Ellipses, Alignment, and More

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.

MUI Typography noWrap
MUI Typography noWrap

Try reducing the font size if your text is too big for the Typography.

FAQs

How do you change the font in MUI Typography?

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.

How do you make MUI Typography bold?

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:

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>
  );
}

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.