React

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

The MUI Typography component is excellent for precisely styling text. Typography can also be used to align text inside of a wrapping Box, Stack, or other component. In this tutorial we will add flex to the parent to align the Typography component. We will create the five examples below. The first three are wrapped in … Read more

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

The Speed Dial component is a useful way to preserve screen space and efficiently show action options. The Speed Dial size, color, hover, and other styles can be customized by targeting the proper nested selectors with the sx prop. In this post I will fork the Basic Speed Dial example from the MUI docs, and … Read more

Material-UI makes importing and using icons simple. We can quickly use MUI Icons in a React project, even if we don’t use any other MUI components. In this tutorial I will show a basic example of using a Material-UI icon in a React project. Then I will show how to use icons inside of other … Read more

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

The MUI Box is a utility component for controlling the layout of child components. It has a few handy styling shortcuts such as m (a shortcut for margin) and p (padding). It renders as a div. The Box can use all the HTML attributes that a div can use. In this post we’ll explore click … Read more

A handful of UI libraries have a spacer component that adds space outside of components to keep component layout decoupled. This post suggested creating one for React, and I thought that was a good idea. I created a component named Spacer that wraps the MUI Divider, strips out the visible aspects (more on that later), … Read more

MUI has a ClickAwayListener component for controlling user interaction with components. If you want to force interaction with a component, or create some UI behavior when a user clicks away, use the click away listener. In this tutorial we will create a form that renders on Button click. If the user tries to close the … Read more

MUI Table clicks can happen at a variety of component levels. For example, we can have a click handler on a TableCell and a TableRow, and both of them can trigger from the same click. In this post we’ll look at click handlers on the following MUI components: TableCell TableRow TableHead TableContainer Furthermore, we have … Read more