Comparing the 3 Best Material-UI Courses on Udemy

Material-UI is an incredible library with great documentation and ever-growing online resources. However, a dedicated video training course can reduce the learning curve for any new library, especially one as robust as Material-UI. I’ll review key factors of three Material-UI training courses from Udemy. These are the courses that are top search results for the … 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 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

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

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

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

The Easiest Way to Implement Material-UI Table Search and Filter

A search bar on a UI table is a feature many users have come to expect. However, the Material-UI Table component does not have an out-of-the-box search feature. Not to worry, the React community has stepped up and provided several Material-UI search bar examples and solutions, two of which I will discuss in this article. … Read more

The Ultimate Guide to the Material-UI Grid Component

MUI Grid Item Align

Material-UI Grid examples compared to Bootstrap and CSS grid Material-UI Grid Component is the Material-UI (MUI) grid system option. It also has the features and APIs of MUI components that MUI users are familiar with. The question when considering using MUI Grid is: will this be superior to other grid alternatives? YouTube video version of … Read more