JavaScript

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

The Material-UI Dialog component is composed of several MUI components, including a Backdrop. The Backdrop obscures the rest of the screen and prevents user interaction with other UI elements. By default, MUI closes the Dialog if the Backdrop is clicked. If you need to force the user to interact with the Dialog, you don’t want … Read more

Material-UI has a useful divider component for separating list items, divs, or any other element. The divider visually appears as a horizontal line separator. We can customize the thickness and width of this line with a few CSS values. I started with this example from the MUI docs and then styled the horizontal dividers. The … Read more

The Material-UI TextField is composed of several subcomponents which can make styling a challenge. However, these subcomponents provide excellent functionality and customization. In this tutorial I will show exact code for styling the text alignment and color in the TextField. We will target several MUI TextField default classes: I’ll show detailed DOM screenshots and full … Read more