The Complete Guide to the Material-UI Card Header

The Material-UI Card Header component is a versatile component that can make Card layouts look great. Naturally I wondered: what does a Card look like with every single prop enabled? There are nine total props on the card header; I’ve actually only enabled eight of them because the disableTypography prop actually turns off two other … Read more

How to Use MUI Flexbox: Flex-Grow and Flex-Shrink

MUI Flexbox System

The flexbox module is a direction agnostic layout system made for managing the layout of a component. Flex is designed for optimizing layout when available space is unknown or dynamic. The flexbox layout includes props set on both parent and children elements to control child size and order. Read an incredibly detailed overview of the … Read more

Add Buttons, Links, and Other Custom Cells in Material-UI Datagrid

Material-UI’s DataGrid can be customized to meet a variety of use cases. A particularly useful feature is the renderCell prop, which is a prop of the columns object in the DataGrid. The renderCell prop allows you to inject components into the DataGrid, creating a column of custom cells. This post will explore the code for … Read more

How to Set Multiple Values Programmatically in the MUI Autocomplete Component

It’s helpful at times to be able to programmatically set values in a component. Often this can be accomplished in a simple manner with useState. For Autocomplete, it was a bit more complicated and difficult to find. After finally getting it working, I realized there was actually an example straight from the docs of programmatically … Read more

How to Add Autocomplete to Material-UI-Chip-Input

Material-UI-Chip-Input is an excellent package created by TeamWertarbyte. It’s core functionality is that it allows a user to quickly create chips from text. Material-UI-Chip-Input has tons of functionality (and props to support it). However, one thing that is missing (actually, broken it seems) at the time of writing this article is autocomplete. The History Behind … Read more

The Ultimate Guide to MUI Default Theme: Breakpoints, Overrides, Shadows, Typography, and More

There are 12 top-level fields within the Theme object that can be customized to give your app the exact look-and-feel that you desire (see the entire default theme object here). Palette may be the most commonly customized field, but in this guide, I will demo less commonly configured fields: breakpoints, overrides, shadows, and typography. I … Read more

Customizing MUI Typography: Strikethrough, Font Size, More

The Typography component is critical for a consistent UI. This article explores how to customize the Typography component through extending the theme.typography object, creating a Typography Styled Component, and overriding the MuiTypography base class. Specifically, I will add strikethrough (textDecoration: “line-through”), font style, letter spacing, and font size to the Typography component and using the … Read more

The Best Material UI (Version 5) Course on Udemy

Material-UI is an incredible library with great documentation and ever-growing online resources. I’ve written 200+ articles on Material-UI, and yet I still find new features and run across new challenges regularly. A dedicated video training course can reduce the learning curve for any new library, especially one as robust as Material-UI. I now have my … Read more

How to Create a Material-UI Treeview with Styled Checkboxes

Treeview with Checkboxes

I was recently researching what to write about next and discovered that quite a few people are interested in adding checkboxes to the Material-UI Treeview component. In this Material-UI Issues thread, user dnquang1996vn shared a great Code Sandbox he created. In this post, I will dive into his code for the following reasons: It’s better … Read more

How to Position a Material-UI Drawer Inside a Div

The Material-UI Drawer React component is a useful container component with a variety of positioning options. It can be anchored to the top, bottom, or sides of the viewport and opened or closed with ease. However, the Material-UI Drawer is not an easy component to position inside a div or container. I was able to … Read more