Material UI

MUI has several options for setting text color on single components or all components of a type. However, can we set a global text color in Material UI? In this tutorial I will set text color for the Typography component and show how we can set text color for all components. In this demo we … Read more

The Material UI Stepper component is a great way to direct users to fill out forms or complete certain tasks. In this tutorial we will change the background color of the stepper, change step button active and completed color, and insert a custom icon into a step. Here’s what we will build: I started with … Read more

The Material UI AppBar is a useful component for creating top of page toolbars, menus, and logos. However, sometimes it is challenging to keep the AppBar from covering content. It can also be a challenge to position the height and z-index. In this tutorial we will show how to create an AppBar that does not … Read more

MUI Buttons in a disabled state have CSS property pointer-events set to off. This presents a challenge when we want to show a ToolTip on hover of a disabled button. Simply setting pointer-events: all; does not solve the problem. In this tutorial I show a clever solution that enables ToolTips on disabled button hover. The … Read more

The MUI Table can quickly be enhanced with edit and delete functionality. A good approach is to use state management, perhaps even useState, and click listeners to swap a TextField into a Cell and capture user typing. Deleting requires a component column and another useState value. Here’s what we will build: Notice there is no … Read more

The MUI Theme can be customized with new values for existing breakpoints, and it can even have new breakpoints added (i.e. bg: 1000). In this tutorial we will customize theme breakpoints and show an example of every breakpoint function being used (i.e. theme.breakpoints.up and theme.breakpoints.down). Here’s a screenshot of what we will create. It can … Read more

Sometimes just because we can code something doesn’t mean we should use it in production. That’s how I feel about creating an expandable/collapsible row in the Material UI DataGrid. In this tutorial, I added expand and collapse to the free MUI DataGrid (imported from “@mui/x-data-grid”). See the screenshot below: This feature is only available on … Read more

MUI has a great example in the docs of creating a basic MUI dropdown button. In this post I take that example and customize the position of the dropdown and the styling of the dropdown and button. Here’s what we will build: The button style changes based on the open state of the dropdown. The … Read more

The Material UI Dropdown component is not actually a specific component. Instead, there are three choices of component you can use as a “Dropdown”: Autocomplete Select TextField A basic “dropdown” version of each of these components look identical but have significantly different APIs. The Autocomplete and Select have a Popper menu by default, but the … Read more

The MUI RadioGroup is a specialized component for wrapping radio buttons and controlling alignment. As we will see later, it renders the same as a FormGroup except with role=”radiogroup”. Here’s the example we will build in this tutorial: This RadioGroup has an onChange handler and can be given error and disabled states through its parent … Read more