Why Use AirBnB’s ESLint Config? A Review of AirBnB’s Rules List

Properly formatted code is a widely agreed-upon virtue in the craft of programming. There are sometimes differences of opinions on exactly what the right format is, but generally it is formatting that contributes to the readability of code and understanding of the intent of the code. Perhaps the most common rules list for ESLint is … Read more

How to Add Autocomplete to Material-UI-Chip-Input

Material-UI-Chip-Input is an excellent package created by TeamWertarbyte. It’s core functionality is that it allows a user to quickly create chips from text. Material-UI-Chip-Input has tons of functionality (and props to support it). However, one thing that is missing (actually, broken it seems) at the time of writing this article is autocomplete. The History Behind … Read more

How and When to Specify Globals in Eslintrc: A Detailed Example With Configs and Results

The ESLint docs have a short section that gives the fundamentals of configuring global variables in a .eslintrc file. However, the docs do not answer the following questions: When and why would I want to define global variables in ESLint? What errors occur when I try to use global vars differently than they are configured? … Read more

The Ultimate Guide to the Material-UI Theme Object: Breakpoints, Overrides, Shadows, Typography, and More

Customizing the Material-UI Theme Object

Many developers experienced with Material-UI have used the theme object to customize the color palette for their apps. However, palette is one of many configurable objects within the theme object. There are 12 top-level fields within the Theme object that can be customized to give your app the exact look-and-feel that you desire (see the … Read more

How to Extend Material-UI Typography With Strikethrough, Font Size, Spacing, and Color

The Typography component is critical for a consistent UI. This article explores how to customize the Typography component through extending the theme.typography object, creating a Typography Styled Component, and overriding the MuiTypography base class. Specifically, I will add strikethrough (textDecoration: “line-through”), font style, letter spacing, and font size to the Typography component and using the … Read more

Material-UI On Udemy: Comparing the 3 Best Courses

Material-UI is an incredible library with great documentation and ever-growing online resources. I’ve written 50+ articles on Material-UI, and yet I still find new features and run across new challenges regularly. A dedicated video training course can reduce the learning curve for any new library, especially one as robust as Material-UI. I’ll review key factors … Read more

How to Create a Material-UI Treeview with Styled Checkboxes

Treeview with Checkboxes

I was recently researching what to write about next and discovered that quite a few people are interested in adding checkboxes to the Material-UI Treeview component. In this Material-UI Issues thread, user dnquang1996vn shared a great Code Sandbox he created. In this post, I will dive into his code for the following reasons: It’s better … Read more

How to Position a Material-UI Drawer Inside a Div

How to Position Drawer Inside Container

The Material-UI Drawer React component is a useful container component with a variety of positioning options. It can be anchored to the top, bottom, or sides of the viewport and opened or closed with ease. However, the Material-UI Drawer is not an easy component to position inside a div or container. I was able to … 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

The Ultimate Guide to Styling and Customizing Material-UI Accordion

Material-UI Accordion change icon

The Material-UI Accordion (previously known as the expansion panel) is commonly used for controlling when secondary components or information is displayed. In this example, we will build an Accordion that has components nested in both the summary and details sections and discuss the different components that compose an Accordion (AccordionSummary, AccordionActions, AccordionDetails). We will also … Read more