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