Dynamically Loading Material-UI Icons Using React Router Query Params

The purpose of this tutorial is to demonstrate how to use query params in React Router, including using nested routes. However, instead of a boring how-to, I created a tutorial that includes: Dynamically loading Material-UI (MUI) icons. Using Material-UI Buttons as React Router Links. Programmatically setting the route using the useHistory React Router Hook. Extracting query params using … Read more

Easily Add Search and Filter to MUI Table

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. The React community has created several Material-UI search bar examples and solutions, two of which I will discuss in this article. There is also no filter by … Read more

Customizing the Material-UI Theme Color Palette (MUI v5)

Material-UI is a slick and powerful component library for quickly building React apps. Material-UI’s theme palette is the foundation for uniquely theming your MUI components so that your app has a distinct “look and feel”. However, it can be challenging to extend the palette to fit your app’s distinct needs. ***UPDATED FOR MUI v5 In … Read more

How to Customize Material-UI Table Cell Width and Styling

Material-UI Table Cell Width

Customizing Material-UI Table Cell width is a common requirement. Precisely styling the TableCell component is also often requested by users. In this demo, I will show how to create a table sized with fixed width or a dynamic width that fits to the contents of the table cells. I will also set TableCell hover color, … Read more

The Ultimate Guide To Material-UI Table Row Height

Material-UI’s table component is a versatile table capable of many customizations. However, finding the proper syntax for simple styling changes can sometimes be challenging. This guide will show you how to set row height for a table row. By default, MUI Table has a minimum height of about 56px that is difficult to override. Below … Read more

The Complete Guide to MUI Grid Item Alignment (v4 and v5)

This guide focuses on aligning items in every conceivable way in Material-UI Grid: aligning right, left, and horizontally centered; aligning top, bottom, and vertically centered. In this example I will use the Material-UI Grid, but the alignment principles apply for aligning all MUI components. You will learn how to align items in any vertical or … Read more

Material-UI’s Grid Component vs Flexbox, Bootstrap, and CSS Grid

The Material-UI Grid Component is MUI’s grid system solution. 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 this article here: https://youtu.be/YO5jGf3_-gc Flexbox, Bootstrap, and CSS Grid have proven … Read more

Set a Minimum Display Time for Material-UI Skeleton Loader

The Material-UI Skeleton gives a great visual treat to users of your website or app. It’s strength is that it makes the user feel as though the app is useful and useable before critical loading is completed. Let’s configure a Material-UI Skeleton Loader to display for 1 second OR the loading time of an API … Read more

How to Change MUI TextField’s Border Color (Hover, Focus, Overrides, and More)

I spent quite a few hours recently on a seemingly simple task: customizing the border color of a Material-UI TextField when outlined variant and disabled state were applied. The TextField is a complex component to style and I hope others will benefit from the examples presented here. This post includes MUI v4 and and v5 … Read more

Material-Table for React: A Step-By-Step Tutorial

material-table react examples

Material-Table is a relatively new addition to the suite of libraries providing data table functionality in React. The particular claims to fame for material-table is that it is quick to get running and built on Material-UI. It is a Table component that augments the existing Material-UI Table. In this intro to material-table I’ll implement a … Read more