The Definitive MUI MenuButton and Menu Example (With TypeScript!)

Menu buttons are common components in web development. Interestingly, MUI doesn’t currently offer an out-of-the-box MenuButton component. However, they do have a compositional component in the docs that we will massively customize in this tutorial. We will add a dynamic icon to the button that rotates based on Menu open state. Then we will explore … Read more

The Essential MUI Tooltip Demo With Custom Position, Arrow, and Internal Components

The MUI Tooltip component has lots of customization options. This tutorial focuses on positioning, the anchor arrow, and how to render different components and images internally in the Tooltip. If you are looking for styling inside the Tooltip, this post shows many different examples of styling the Tooltip component. Here’s one of the examples we … Read more

The Ultimate MUI v5 DatePicker and TimePicker Tutorial (Plus Styling!)

The Material-UI DatePicker and TimePicker components are highly functional and customizable components. They satisfy many use cases for selecting date and time, for example in forms or filters. In this tutorial we will explore how to use the pickers plus some of the best features available in the components. After showing examples of several useful … Read more

How to Style the Material-UI Tooltip

The Material-UI Tooltip is an exceptionally well designed component. It has a number of props delivering great versatility for numerous use cases. However, styling the MUI Tooltip is still a manual process that requires a strong grasp of CSS. In this Tutorial I will demonstrate how to style the Tooltip in many ways, including width, … Read more

React MUI v5 Data Grid Tutorial: Sort, Filter, Export, Pagination and Cell Editing

The Material-UI Data Grid is easily the largest and most customizable component in the MUI library. It has more subcomponents and props than any other component. In this tutorial I will review common features of the Data Grid: sorting, filtering, exporting, pagination, and cell editing. I will also review the docs and some challenges I … Read more

React MUI v5 Table Tutorial: TypeScript, Styling, and Component Cells

The Material-UI Table component is a great data visualization component with incredible customization options. However, sometimes we need a foundational guide for a component. This tutorial explores the subcomponents that compose a table, styling the table the MUI v5 way, TypeScript, and a few Table props. We will create the table pictured below. The random … Read more

The Complete Guide to Customizing the MUI Rating Component

The Material-UI Rating icon is a quick solution for giving users the ability to input a rating. The component has built-in props for customizing the size, color, and icons. The component has some interesting customizations and limitations. The props seem to provide all the customization you could want. However, on further examination I found the … Read more