5 MUI SX Breakpoint Examples

The sx prop makes responsive design and styling a simple process. This post shows five different applications of breakpoints with sx: Responsive layout Changing background color Changing font size Breakpoints in nested selectors Conditionally passing style objects I believe the five tutorials below provide will provide guidance for almost any responsive design need you may … Read more

4 MUI SX Hover Examples

Hover styling is a common requirement for UI components. However, it can be challenging in MUI to get the syntax correct to add hover using the sx prop. In this tutorial I show how to add hover styling to the Box, Button, Paper, and TextField components. The components are below first with default styling and … Read more

How to Add MUI Badges to Tabs, Buttons, and Components in Containers

A difficult challenge when using Material-UI Badges is making sure they don’t get cut off or hidden when they overflow a component. Badges on the Tab component have this problem. Another challenge is making sure Badges don’t expand with a container and position far away from their anchor component. Badges on Buttons inside of Stacks … Read more

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 Ultimate Material-UI Select Component Tutorial (With TypeScript!)

MUI Select Tutorial with TypeScript

The MUI Select component is an input/dropdown combo that comes with dozens of configurable props. In this tutorial I will customize the dropdown position, the default and placeholder values, add multiselect, and add labels and helper text, and more. In most of my examples I dive deep into styling, but this tutorial is all about … 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