Material UI

The Material UI Switch component is has the same functionality as a checkbox while providing a more tangible look and feel. We can customize anything we want with the Switch, including the color, size, track and thumb. Here’s the Switch example that we will create. I will include DOM screenshots to show what classes are … Read more

The Material UI Checkbox component can be customized either with props or by creating nested selectors. The checkbox has lots of default classes applied based on its state (checked, error, disabled) that can be used to customize the icon color and size. In this tutorial, I will create the below checkbox. It has custom checked … Read more

The Material UI Container has a useful prop for disabling padding, but it does not have access to some of the spacing props that the Stack component has. In this post we will add padding, margin, background color, and border to the Container component using the sx prop. This post uses the same base code … Read more

The MUI FormControl component is used as a high-level wrapper around subcomponents in a form. It’s primary purpose is state management. We will create a form that has three FormControl components inside, each wrapping a row of components. In many UIs that use forms, likely only one FormControl would be used and would wrap all … Read more

Material-UI Background Color can be customized once and used across all components in an app. There are several ways of doing this at scale, and most involve updating the theme palette or using theme overrides. I will build the mini app below using Paper, FormLabel, and Buttons. All will draw their background color from the … Read more

The Material-UI MenuItem component has many useful props built into its API. It can easily be given a selected or disabled state, and these states provide useful default classes. The MenuItem component can also be used to add links to Menus. The MenuItem onClick prop is important for setting states and interacting with Menu links, … Read more

The MUI Grid container can have full width and height styling applied with only a few lines of code. The default width behavior is for the Grid container to expand to 100% of its parent. The height only needs a height set in its sx prop. I’ll create two tutorials with full code for setting … Read more

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