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. 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 … Read more

How to use Justify-Content in MUI (5 Examples!)

The justify-content CSS property is the most commonly used flexbox modifier, according to my analysis of search trends. In MUI, we usually see camel-case justifyContent syntax because MUI often uses JavaScript to apply styling. To paraphrase MDN, justify-content controls space between and around child elements along the main axis of a container. The “main axis” … Read more

When to use the MUI ‘sx’ Prop, Styled API, or Theme Override

Material-UI offers several different APIs or systems for styling components. It can be difficult to know which is the right to use from a clean code perspective. In this post I will explain the similarities and differences between sx, styled, and theme overrides in MUI. Here’s an important point: all three styling options can accomplish … Read more