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

How to Style Material-UI Tabs (and Remove Indicator)

MUI Tabs are a handy component for easy navigation with out-of-the-box styling. However, sometimes that styling is more than we need. In this Tab Panel example, we will disable the indicator (the underline at the bottom of the Tab just above the shadow) and instead add our own styling. We will style Material-UI’s Tabs with … Read more

How to Position an MUI Drawer Under AppBar (Responsive Sizing!)

MUI Drawer Tutorial

The Material-UI Drawer component is an essential layout component for everything from navigation links to informational sidebars. In this React MUI Drawer example, we will make a mobile responsive Drawer component that is always visible on screen sizes > 375px, and on smaller screens it opens and closes with the click of a menu icon. … Read more

How to Perfectly Position and Style a Material-UI Popover

Material-UI Popover Example

The Material-UI Popover is a handy component for giving quick information to users. However, it has characteristics of both tooltip and modal components, so it has some quirks. In this example, we’ll position the popover relative to it’s anchor element and also relative to the click position in the window. Furthermore, we’ll transform the starting … Read more

The Ultimate Guide to Customizing Material-UI DataGrid: Height, Width, Alignment, Click Handlers, and More

Material-UI DataGrid Example

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. ***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. I include code for both MUI v4 and v5 where necessary. Styling code … Read more

Customize MUI Autocomplete with getOptionLabel, renderInput, and renderOption

Customizing the MUI 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

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

How to Create a Material-UI Table Sticky Column in Only Three Lines of Code

Material-UI Table with Sticky Column

Material-UI is a popular component library with excellent functionality and slick styling. Sometimes, however, we need just a bit more than what is available “out-of-the-box”. Material-UI comes with a Table component with significant customizations and styling options. The Table even includes a sticky header option. However, it does not have a prop for setting ‘sticky … Read more

How to Align Buttons in Material-UI Using the Box Component

Material-UI’s Box component is the perfect tool for constructing your layout precisely as desired. In this example I will wrap Buttons in the Box component and align left, center, and right with justifyContent. I will align vertically with alignItems. Then I will add margin and padding for additional spacing. This tutorial show both MUI v4 … Read more

How to Customize Material UI AppBar Color and Styling

Material-UI AppBar is a useful component for positioning titles, hamburger menus, admin buttons, and more. Styling the AppBar background color, text color, positioning, font, and any other CSS property is a common need and can be tricky to figure out. This demo will show several methods for customizing the AppBar, with a particular focus on … Read more