How to Create a Material-UI Treeview with Styled 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

How to Position Drawer Inside Container

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

How to Style Material-UI Tabs and Tab Indicator (Plus TypeScript)

React Material UI Tabs Example

Material-UI 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

The Ultimate Guide to Styling and Customizing Material-UI Accordion

Material-UI Accordion change icon

The Material-UI Accordion (previously known as the expansion panel) is commonly used for controlling when secondary components or information is displayed. In this example, we will build an Accordion that has components nested in both the summary and details sections and discuss the different components that compose an Accordion (AccordionSummary, AccordionActions, AccordionDetails). We will also … Read more

How to Add Filtering, Subheader, and Styling to the Material-UI List Component

Material-UI List Example

The Material-UI List component is handy because it has lots of out-of-the-box functionality. Take a look at the following API’s the List examples in the docs hook into: However, finding example beyond the docs, or simply understanding clearly how to use some of the customizations, can be challenging. In this demo we use the Checkbox … Read more

How to Create a Material-UI Select Component with Styled Checkboxes

Material-UI Select with Checkboxes

The Material-UI Select component creates a slick menu for users to choose from a list of options. The standard Select uses a dropdown (created from a Popover component) and the native Select uses the html option element. Both of these variations of the component can have checkboxes enabled. The standard Select can easily have checkboxes … Read more

The Definitive Tutorial to the Material-UI Drawer Component

Material UI Drawer Example

The Material-UI Drawer component is an essential layout component for everything from navigation links to informational sidebars. In this React Material-UI 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

The Ultimate Tutorial to React-Router Link Component

React-Router is a highly popular routing library. As of the beginning of 2021, it has more than 4 million weekly downloads: One of the core pieces of react-router is the Link component. This versatile component has props for customizing routing, passing routing params as objects, styling, history, and more. Let’s build an app that demonstrates … 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

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