How to Make a MUI Horizontal Line Divider (Custom Thickness and Width)

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

How to Set MUI TextField Text Alignment, Text Color, and Label Color

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: MuiInputBase-root MuiFormLabel-root Mui-focused I’ll show detailed DOM … Read more

How to Fix (or Disable) “jsx-a11y/interactive-supports-focus” Errors

The ESLint jsx-a11y plugin helps developers create accessible websites for all users. The plugin has 36 rules (as of publishing this post) for writing WCAG and WAI-ARIA compliant code. In this post I will give three examples of breaking the interactive-supports-focus rule and the solution. Each example will have: Offending code that broke the interactive-supports-focus … Read more

MUI Grid Spacing, Padding, and Margin: A Styling Guide

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