How to Create a Material-UI Container with Fluid Layout (Plus Padding, Border, and Margin Styling)

Fluid Container Example

The Material-UI Container is a great all-purpose layout component. The fluid container makes it even easier to center and size components exactly as you want them. How? The fluid container expands and contracts with screen size according to a simple maxWidth prop easily passed to the component. Full React code for this tutorial is in … Read more

Material-UI Backdrop Example: How to Masking the Contents of a div

Normally I like to take a Material-UI component and customize it in a challenging and useful way. However, the Backdrop component is a simple mask component that might be used with a modal or used to block a section of the screen while waiting for data to load. With something this straight forward, I struggled … Read more

The Ultimate Guide to Customizing Material-UI DataGrid

Material-UI DataGrid exampl

The Material-UI DataGrid component is designed for interacting with large data sets. However, it can be tricky to get the layout exactly like you want. What We’ll Build In this article I will construct a DataGrid with the following features (plus a Resources section): These things may not sound complicated, but custom styling individual rows … Read more

How to Create a Material-UI Divider with Text and Custom Color

Material-UI Divider Example

Like many component libraries, Material-UI for React comes with a Divider component. Unlike many libraries, it is possible customize the Material-UI Divider text and color through the component’s built-in API. In this article, we’ll create the below: Notice that the color of the first divider is green on the left, blue on the right. This … Read more

The Definitive Tutorial on Styling Material-UI Chips

Material-UI Vertical Chip

Chips are handy components that quickly convey information. From the Material-UI docs: “Chips are compact elements that represent an input, attribute, or action.” Chips commonly are a circle or a horizontally-shaped oval. However, I want to code a challenging chip design so that we are have to stretch MUI to the limits. We’ll build the … Read more

Tailoring the Material-UI Card Component

Material UI Card

Card components are a common UI building block, and they need to be versatile and customizable to handle a variety of needs. React Material-UI Cards have a significant capacity to be tailored to fit your needs. In this demo we’ll create a mobile responsive card and configure the card header, content, and footer background color. … Read more

How to Build a Material-UI Transfer List from Checkboxes and Grids

Transfer List example

Material-UI docs contain a useful pre-built component called a “Transfer List”. You’ve likely used transfer lists before: swap selections from one side to the other and back again. In this article I’ll take Material-UI’s enhanced transfer list and, well, enhance it even more. I’ll style with elevation and box shadow, plus add in the sort … Read more

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

The Complete Guide to Customizing the Material-UI Autocomplete Component

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 Material-UI Paper Padding, Margin, and 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