How to Customize Material-UI Table Horizontal and Vertical Scrolling

Material-UI Table vertical and horizontal scrolling can be configured with only a few simple steps. We can force the scrollbars to appear or disable them completely. Additionally, the scrollbar and scroll thumb can styled with WebKit to create a truly customized user experience. In this demo we will create the table from the screenshot below … Read more

Customizing Material-UI Table Background Color, Border, Font Size, and onClick

Material-UI Tables can be uniquely styled if you target the appropriate component: TableCell, TableRow, Table, or TableContainer. In this demo, I will customize the background color, font size, and borders to create the table in the screenshot below. We’ll go over the differences in targeting the header cells and the body cells. Additionally, I will … Read more

The Ultimate Guide to Material-UI Grid Containers and Items (MUI v5)

Material-UI Grid Containers and Items

The Material-UI Grid is unusual in the universe of MUI components: a Grid is composed of individual children Grids with either a container or item layout prop enabled. The container and item props affect how the child Grids render in the DOM and determine which additional props are available for use. I will show what … Read more

The Essential Guide to Material-UI Styled Components (MUI v5)

Material-UI version 5 made the styled API one of two primary component styling APIs. Unfortunately, the complexity of styled componenents in Material-UI increased exponentially. For example, now developers must decide: Should I use the styled API that wraps emotion? Should I use the styled API that wraps styled-components? Should I use styled components directly in … Read more