Material UI

The primary method for styling MUI v4 components is the makeStyles hook. MUI v5 recommends the sx prop or styled API, but the makeStyles hook is still supported. This post shows five interesting examples of hover styling using the makeStyles hook: hover on a label (uses v5 makeStyles import) hover on Buttons nested in a … Read more

The Autocomplete component is useful for giving the user limited options to select from. When a choice is selected it populates an Input subcomponent. Autocomplete has a ‘clear’ button for removing the selected choice. In this post we will: Add a custom clear event handler Style the clear button Remove the clear button The clear … Read more

The MUI Autocomplete component is great for giving users limited options to choose from in forms or other UI layouts. I will show how to get and set values, including default values, in the Autocomplete component. I will show how to use the Autocomplete’s data in a state value and also with a form submission. … Read more

I created an example of setting state values in a MUI TextField and updating the value when the TextField is changed. This is a method of setting a default value but it has more use than the default prop in the MUI TextField. Notice the component underneath the TextField in the screenshot above. It is … Read more

The MUI Button can be styled with a perfect size to fit your UI requirements. MUI provides several options for controlling Button size: sx prop CSS values style system shorthand – spacing, m, p size prop The Button is created with the border-box layout, so any border and padding are counted as part of the … Read more

The MUI Drawer component has excellent props for customization. Also, the MUI SX prop allows us to style the component precisely as needed. However, it is important to know that we must target the sx prop of the Paper component inside of the Drawer component. We can pass styling values to the child Paper component … Read more

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

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

The MUI Badge component requires knowledge of MUI default classes in order to properly style the component. In particular, you will need to create a nested selector that targets the MuiBadge-badge class in order to apply background color, centering, and sizing to the visible portion of the Badge component. Below is the Badge that we … Read more

The MUI Badge renders as two spans: one that wraps the anchor component and one that renders the ‘visible’ Badge area. This means click and hover events fire for the Badge even when the events occur on the anchor component. In this tutorial we will solve this problem. We will make the Material-UI Badge on … Read more