React

The Material-UI Grid is composed of individual children Grids with either a container or item layout prop enabled. The container and item props affect when and how spacing, padding, and margin can be used. We will explore how spacing renders in the DOM. For example, spacing={3} only adds padding-top and padding-left. This is by design. … Read more

This post build off of my code base for styling MUI Accordions. I explore the component’s expand/contract state in the DOM, the classes applied by MUI, and how to handle the click and change events. Here is the original Accordion styling post, plus a few other helpful posts: The Ultimate Guide to Styling and Customizing … Read more

MUI forms can be submitted using good old-fashioned HTML or submitted using React hooks for state tracking. In this tutorial I will look at the network traffic and code differences to compare and contrast. MUI uses the React Form component as a wrapper around MUI input subcomponents. In other words, MUI does not have it’s … Read more

MUI v5’s new styling system is built on emotion, a CSS library for writing CSS with JavaScript. I’ll show the difference in styling components using Emotion, the sx prop, and the styled API. However, there is fundamentally no difference because sx and styled both use emotion ‘under the hood’. Here are the TextFields we’ll create. … Read more

The MUI Tabs component renders an indicator that gives a visual cue of which tab is selected. This indicator can be easily sized and styled in MUI v5 by using TabIndicatorProps. In this demo I will show what values TabIndicatorProps accepts and how to change width, height, and color of the tab indicator. Here are … Read more

The Material-UI Select component is a great user input component with a list of options. However, it is a bad experience to require a user to click into the component and press “backspace” to clear it. In this tutorial I will show how to add a clear button inside the Select. The biggest challenge is … Read more

In this tutorial we will create an easy way for a user to clear a Material-UI TextField. We’ll then use similar code for clearing the Input. The TextField component is composed of a Material-UI Input plus other components, so they behave similarly. I’ll first show how to clear the TextField with an external button press. … Read more

The MUI Collapse component is an invisible wrapper that handles transition animation. It can be added to Tables, Cards, and almost any other MUI component to create an expandable area. I created three examples with the collapse component: two expand a Table Row and one expands the content area of a Card. Here’s a screenshot … Read more

The primary method for styling MUI v4 components is the makeStyles hook. MUI v5 recommends the sx prop or styled API, but the makeStyles hook is still supported. This post shows five interesting examples of hover styling using the makeStyles hook: hover on a label (uses v5 makeStyles import) hover on Buttons nested in a … Read more