Material UI

The MUI RadioGroup is a specialized component for wrapping radio buttons and controlling alignment. As we will see later, it renders the same as a FormGroup except with role=”radiogroup”. Here’s the example we will build in this tutorial: This RadioGroup has an onChange handler and can be given error and disabled states through its parent … Read more

MUI Buttons come with focus and hover styling by default. The contained variant also has some shadow on it. In this tutorial we will explore several options for removing these styles. Here are the Buttons we will build to remove hover, focus, and shadow using props and sx: Material UI Button Remove Hover Style There … Read more

Using display: flex on wrapping components in MUI provides robust one-dimensional layout options. A common method for adding flex is through the sx prop. However, some components are set to flex by default. In this tutorial we will explore components that have display: flex by default, add flex to wrappers that don’t start with flex, … Read more

Material UI has an effective way to set font size for all components. It also has quick ways for setting font size for components of the same type, and for individual components. I will show one example of each method. We will customize font size in the TextField, Container, and Typography as seen below: Full … Read more

The Material UI CircularProgress component is a quick way to give the user visual feedback while waiting for loading. It can be challenging to get the centering just right when the CircularProgress is nested in a component. Furthermore, the color prop is limited to MUI theme or color object values. We will explore how to … Read more

The Material UI FormControlLabel is composed of a FormControl, a Label, and whatever control component is passed in (checkbox, switch, radio). This means we have to explore the DOM to find classes to use as selectors and make sure we target the correct child element. Here’s what we will create in this tutorial: This post … Read more

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. Its 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