How to Add a React Router Link to a Material-UI Alert Component

Have you ever seen an app display an alert that action is required, but didn’t give you the relevant link to take the action? Frustrating, isn’t it? In this demo, we’ll make an alert that has a React Router Link in it: In the above Alert, the Link is contained in a Button component. However, … Read more

Customize MUI Autocomplete with getOptionLabel, renderInput, and renderOption

Many React Material-UI components have incredible customizations out-of-the-box, while some are functional but missing nice-to-have options (I’m looking at you, Table-without-a-search-prop). The Autocomplete component may have the most customization options of any MUI component I’ve seen. Chips, grouping, disabled options, multiselect, custom popup items, fixed options, and more are demoed in the docs. Link to full JavaScript … Read more

How to Style the MUI Paper Component: Padding, Margin, Elevation

Material-UI’s Paper component is intended exactly as it sounds: to give apps and components a paper-like background and feel. The Paper component is often spaced and shadowed using padding, margin, and either the elevation or outlined variant. In this demo, I’ll show the look and feel of four different React Material-UI Tables wrapped in a Paper component with different … Read more

How to Customize Material-UI Slider Thumbs and Slider Track

Material-UI has an extremely robust and customizable slider component. Naturally, I want to push it even farther. In this demo, I’ll create slider thumbs that have images and set slider behavior based on slider position. Code Sandbox link is in the Resources section. MUI Slider Image Thumbs There are two methods for creating slider thumbs … Read more

The Ultimate Guide to Setting Material-UI Grid Item Height

The goal of this demo is to achieve equal item heights and masonry-style item wrapping in Material-UI’s Grid. This guide focuses on two things: Stretch all items in a Material-UI Grid row to be the same height. Achieve a “masonry-style” layout where shorter and narrower items can wrap in a column when vertical space allows … Read more