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

Create Max Width, Fixed Width, and Full Width MUI Containers

The Material-UI Container is a great all-purpose layout component. The fluid container makes it even easier to center and size components exactly as you want them. How? The fluid container expands and contracts with screen size according to a simple maxWidth prop easily passed to the component. If you want to convert the below tutorial … Read more

Material-UI Backdrop Example: How to Mask the Contents of a Div

Normally I like to take a Material-UI component and customize it in a challenging and useful way. However, the Backdrop component is a simple mask component that might be used with a modal or used to block a section of the screen while waiting for data to load. With something this straight forward, I struggled … Read more

The Ultimate Guide to Customizing Material-UI DataGrid: Height, Width, Alignment, Click Handlers, and More

Material-UI DataGrid Example

The Material-UI DataGrid component is designed for interacting with large data sets. However, it can be tricky to get the layout exactly like you want. ***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. I include code for both MUI v4 and v5 where necessary. Styling code … Read more

How to Use ESLint “fix”: Options, Issue Types, Exit Codes, and More

Many React projects have ESLint set up and devs are fixing lint errors as they code. This is great for reducing bugs, and keeping code cleanly formatted. However, sometimes there’s a situation where a project can have a lot of linting errors (i.e. adding ESLint to an existing project) and it would be tedious for … Read more

How to Ignore and Disable TypeScript Rules

This tutorial provides syntax for ignoring lint rules at the line, file, and package level. I focus on syntax for TypeScript-ESLint but will include TSLint and ESLint commands. TSLint was deprecated in late 2019 in favor of typescript-eslint. The combined linter is a good idea because both TSLint and ESLint are linters and many people … Read more

How to Set MUI Divider Color (And Add Text!)

Material-UI Divider

Like many component libraries, Material-UI for React comes with a Divider component. Unlike many libraries, it is possible customize the Material-UI Divider text and color through the component’s built-in API. In this article, we’ll create the below: Notice that the color of the first divider is green on the left, blue on the right. This … Read more

The Definitive Tutorial on Styling Material-UI Chips

Material-UI Chips

Chips are handy components that quickly convey information. From the Material-UI docs: “Chips are compact elements that represent an input, attribute, or action.” Chips commonly are a circle or a horizontally-shaped oval. However, I want to code a challenging chip design so that we are have to stretch MUI to the limits. We’ll build the … Read more

Material-UI Card Custom Background Color, Header, Content, and Footer

Material-UI Card Component

Card components are a common UI building block, and they need to be versatile and customizable to handle a variety of needs. React Material-UI Cards have a significant capacity to be tailored to fit your needs. In this demo we’ll create a mobile responsive card and configure the card header, content, and footer background color. … Read more

How to Build a Material-UI Transfer List from Checkboxes and Grids

MUI Transfer List

Material-UI docs contain a useful pre-built component called a “Transfer List”. You’ve likely used transfer lists before: swap selections from one side to the other and back again. In this article I’ll take Material-UI’s enhanced transfer list and, well, enhance it even more. I’ll style with elevation and box shadow, plus add in the sort … Read more