React

The MUI 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

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

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

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 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

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

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

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

While exploring MUI Snackbar I ran across a third-party library called Notistack. It is a clever tool whose core feature is the ability to control how many Snackbars are shown. Kudos to iamhosseindhv for creating this resource. I decided to create a Notistack demo to evaluate how much value it adds when using snackbars. I … Read more

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