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

How to Customize MUI Table Horizontal and Vertical Scrolling

Material-UI Table vertical and horizontal scrolling can be configured with only a few simple steps. We can force the scrollbars to appear or disable them completely. Additionally, the scrollbar and scroll thumb can styled with WebKit to create a truly customized user experience. In this demo we will create the table from the screenshot below … Read more

Customizing MUI Table Background Color, Border, Font Size

Material-UI Tables can be uniquely styled if you target the appropriate component: TableCell, TableRow, Table, or TableContainer. In this demo, I will customize the background color, font size, and borders to create the table in the screenshot below. We’ll go over the differences in targeting the header cells and the body cells. Here’s how to … Read more

How to Style and Use MUI ListItemText (4 Examples!)

The Material-UI ListItemText subcomponent is perhaps the most commonly used child component in an MUI List. We’ll take a look at styling and using ListItemText props, and also how to use the component with the ListItemIcon component. Finally we’ll add a link to a ListItem and also show how to handle click events. First, however, … Read more