Awesome MUI Checkbox Examples: Color, Size, Labels, More

The Material UI Checkbox component can be customized either with props or by creating nested selectors. The checkbox has lots of default classes applied based on its state (checked, error, disabled) that can be used to customize the icon color and size. In this tutorial, I will create the below checkbox. It has custom checked … Read more

How to Set MUI Background Color For All Components: 3 Ways

Material-UI Background Color can be customized once and used across all components in an app. There are several ways of doing this at scale, and most involve updating the theme palette or using theme overrides. I will build the mini app below using Paper, FormLabel, and Buttons. All will draw their background color from the … Read more

The Complete MUI MenuItem Guide (Links, Disabled, Select, onClick)

The Material-UI MenuItem component has many useful props built into its API. It can easily be given a selected or disabled state, and these states provide useful default classes. The MenuItem component can also be used to add links to Menus. The MenuItem onClick prop is important for setting states and interacting with Menu links, … Read more

How to Make MUI Typography Text Italic, Bold, or With Ellipses

The Material-UI Typography component is excellent for styling text within a layout. We can quickly add font style, font weight, and text overflow styling. In this MUI Typography tutorial, I will create a Typography component with default styling and then add italic, bold, and ellipses to it. Full React code for this example is in … Read more

How to use Justify-Content in MUI (5 Examples!)

The justify-content CSS property is the most commonly used flexbox modifier, according to my analysis of search trends. In MUI, we usually see camel-case justifyContent syntax because MUI often uses JavaScript to apply styling. To paraphrase MDN, justify-content controls space between and around child elements along the main axis of a container. The “main axis” … Read more

What is the Flex-Grow CSS Property (5 Code Examples!)

The flex-grow property is one of many properties available as part of the CSS flexbox layout. flex-grow is applied to children of an element with display: flex. The flex-grow property allows the children to be laid out proportionally, for example: The flex-grow property will not always behave as expected. It respects minimum width values in … Read more