MUI Grid Spacing, Padding, and Margin: A Styling Guide

The Material-UI Grid is composed of individual children Grids with either a container or item layout prop enabled. The container and item props affect when and how spacing, padding, and margin can be used. We will explore how spacing renders in the DOM. For example, spacing={3} only adds padding-top and padding-left. This is by design. … Read more

The Best MUI Tabs Tutorial: Hover, Active, Focus, and onClick

Material-UI Tabs are composed of several components: the Tabs component, child Tab components, and usually a container and tab panel. We can quickly add perfect styling to these elements with the sx prop and some nested selectors. Additionally, I will show the difference in Tab onClick, Tabs onChange, and which one is best to use. … Read more