Every Material-UI Form Component Explained (MUI v5)

Forms are an important part of many web UIs.  Interestingly, Material-UI doesn’t have a form component.  It has seven form subcomponents (depending on what components you include), but simply relies on the native React Form component as a parent wrapper.  Alternatively, it could be argued the the FormControl component sometimes takes the place of the … Read more

Make Awesome MUI Custom Buttons: Variants, Default Props, & More

The Material-UI (MUI) Button component merits a detailed exploration of all of its functionality. Its broad use across many UIs makes a deep knowledge of it’s props highly valuable. In this MUI Button demo I will create a new button variant (a great new feature in v5!), enable all props on it, and use it … Read more

The Ultimate Guide to the MUI ‘sx’ Prop

MUI sx Prop

Material-UI (rebranded as MUI) recently released version 5, and there were significant changes to the syntax and systems used for styling components. Material-UI v4 relied on JSS and the makeStyles hook for component styling. MUI v5 has migrated to two options: styled API or sx API (<- definitely read this). The styled API creates a … Read more

The Complete Guide to MUI Button Color (v5 and v4)

MUI Button color is a core aspect of proper theming. Fortunately MUI 5 makes it easy to apply the color you want. I will also include Material-UI v4 styling techniques for Buttons where there is a version difference. First I will show the quickest way to change Button color for the following (using the sx … Read more

The Ultimate Guide to the New MUI Stack Component

The Ultimate Guide to the New Material-UI Stack Component

Material-UI (now MUI) has a variety of excellent layout components. The Stack component is new in version 5 and was created to easily handle one-dimensional vertical and horizontal layouts. Previously these were often handled with the Box component using a flex layout, or a Grid component, but Grids were intended for 2-d layouts. One of … Read more

Material-UI Button onClick (and More Events) With TypeScript

MUI 5 is here, but many things are the same as Material-UI 4. Button props haven’t changed much and the look-n-feel of the Button component is as slick as ever. Whether you are using Material-UI 4 or 5, the Button code in this demo will be the same. There is a new alignment component called … Read more

How to Style the Material-UI Autocomplete Component

The Material-UI Autocomplete component and its Popper component can be styled by targeting built-in MUI styling APIs. The Popper is also called a dropdown or listbox. The difference is that Popper is the positioning element while Listbox is the visible list element. That’s why MUI Autocomplete has a prop for customizing the Popper (PopperComponent) and … Read more

Exploring the 5 Most Common jsx-a11y Rules (And How to Fix)

ESLint is a fantastic tool that makes it easy for developers to follow accepted standards. ESLint plugins enhance our coding environment with subsets of standards. In this post we’ll look at jsx-a11y and five of the most-used (by Google search volume) WCAG and WAI-ARIA accessibility guidelines it enforces. This tutorial will help you understand each … Read more

Using ESLint Plugin jsx-a11y With Recommended and Custom Rules

eslint plugin jsx-a11y

Creating “Accessible” web apps is both courteous and a business-savvy goal. Ease of use for the physically impaired increases the potential user base for the apps and may generate good will with users who appreciate such gestures. The ESLint plugin jsx-a11y (also known as eslint-plugin-jsx-a11y) gives developers warnings in their IDE if their code might … Read more

Add Hover Styling to a Material-UI Button with Styled Components

Material-UI is compatible with the popular Styled Components library. While MUI normally uses JSS, devs can choose whichever styling library they prefer. Most of the Material-UI docs give examples using JSS and it can be difficult to figure out proper syntax for combining MUI with Styled Components. However, buried deep inside the MUI docs is … Read more