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

Understanding MUI Labels: TextField Labels, Input Labels, and Form Labels

Material-UI labels provide visual information in a UI, but understanding the different label use cases can be challenging. For example, a TextField is composed of an InputLabel component plus other components. FormLabels are often used as part of a subcomponent in a form. In this article we will explore when to use each label and … Read more

The Essential Material-UI Tutorial

Material-UI is the most dynamic and thorough React component library available today.  If you are developing serious React applications, you should consider using MUI.  This tutorial will show you how to build an app with the following MUI features: Form Input Table-Based Output MUI Styling Theming Styled Components/API SX prop-based styling AppBar/Drawer Architecture MUI Integration … Read more

The Essential Guide to MUI Icon and IconButton Size and Styling

Material-UI’s IconButton is a valuable component for rendering clickable icons. In the below example, I will demonstrate how to precisely set the width and height on an IconButton, and contrast that with sizing a ‘regular’ MUI Button that has an icon in it. I will also show styling examples such as background color, border, rounded … Read more

The Ultimate Guide to the Material-UI Snackbar

The MUI Snackbar component (also known as a Toast message) provides a simple way to notify users about important information. The component can be quickly styled and has several handy props for customizing transitions. In this post we will create an example Snackbar and I will explain the props I use. A common third-party library … Read more