Four Bootstrap Button Hover Examples

Bootstrap is an immensely popular CSS and JS library that facilitates quick grid-style layouts. The library also has a significant number of components in its component library. My favorite thing about the Bootstrap component library is its simplicity. For example, a Button component is simply an html button element paired with Bootstrap’s btn class (and … 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

The Ultimate Guide to Material-UI Table Pagination (MUI v5)

Material-UI Table Pagination Example

Table pagination can be broken into two conceptual pieces: the UI interface for changing pages, and the paginated data request. Material-UI’s TablePagination component is a robust component for solving the UI interface. The MUI TablePagination component is a dynamic and highly customizable component. It has 18 props listed in the docs, and these control everything … Read more

The Ultimate Guide to the MUI ‘sx’ Prop

Material-UI (rebranded as MUI) recently released version 5, and there were significant changes to the syntax and systems used for styling components. Material-UI v4 relied on JSS and the makeStyles hook for component styling. MUI v5 has migrated to two options: styled API or sx API (<- definitely read this). The styled API creates a … Read more

Material-UI makeStyles, useStyles, createStyles, and withStyles Explained

Material-UI makeStyles, useStyles, createStyles, and withStyles

Styling hooks in Material-UI are an effective and exceptional tool for customizing components. However, the similarly-named hooks can be confusing to use. In this post, I’ll explain what each hook does, when to use it, and which hooks are recommended for certain situations. ***MUI 5 UPDATE: There is a new styling system in MUI 5. … Read more

Add Buttons, Links, and Other Custom Cells in Material-UI Datagrid

Material-UI’s DataGrid can be customized to meet a variety of use cases. A particularly useful feature is the renderCell prop, which is a prop of the columns object in the DataGrid. The renderCell prop allows you to inject components into the DataGrid, creating a column of custom cells. This post will explore the code for … Read more

How to Style Material-UI Tabs and Tab Indicator (Plus TypeScript)

React Material UI Tabs Example

Material-UI Tabs are a handy component for easy navigation with out-of-the-box styling. However, sometimes that styling is more than we need. In this Tab Panel example, we will disable the indicator (the underline at the bottom of the Tab just above the shadow) and instead add our own styling. We will style Material-UI’s Tabs with … Read more

How to Customize Material-UI Drawer Width, Color, Position Under AppBar, and More

MUI Drawer Tutorial

The Material-UI Drawer component is an essential layout component for everything from navigation links to informational sidebars. In this React Material-UI Drawer example, we will make a mobile responsive Drawer component that is always visible on screen sizes > 375px, and on smaller screens it opens and closes with the click of a menu icon. … Read more

How to Perfectly Position and Style a Material-UI Popover

Material-UI Popover Example

The Material-UI Popover is a handy component for giving quick information to users. However, it has characteristics of both tooltip and modal components, so it has some quirks. In this example, we’ll position the popover relative to it’s anchor element and also relative to the click position in the window. Furthermore, we’ll transform the starting … Read more