How to Use @TypeScript-ESLint/Ban-TS-Comment

TypeScript is used to reduce errors in code. However, many developers “turn off” TypeScript type checking for a single line with @ts-ignore. This is dangerous because it masks compilation errors. If you are using TypeScript and TypeScript-ESLint in a team setting, you can ban TypeScript comments by adding the @typescript-eslint/ban-ts-comment rule to your eslintrc.json file. … Read more

Awesome MUI Checkbox Examples: Color, Size, Labels, More

The Material UI Checkbox component can be customized either with props or by creating nested selectors. The checkbox has lots of default classes applied based on its state (checked, error, disabled) that can be used to customize the icon color and size. In this tutorial, I will create the below checkbox. It has custom checked … Read more

The Ultimate Guide to Material-UI FormControl: 3 Examples

The MUI FormControl component is used as a high-level wrapper around subcomponents in a form. It’s primary purpose is state management. We will create a form that has three FormControl components inside, each wrapping a row of components. In many UIs that use forms, likely only one FormControl would be used and would wrap all … Read more

How to Set MUI Background Color For All Components: 3 Ways

Material-UI Background Color can be customized once and used across all components in an app. There are several ways of doing this at scale, and most involve updating the theme palette or using theme overrides. I will build the mini app below using Paper, FormLabel, and Buttons. All will draw their background color from the … Read more