Exploring JavaScript Libraries
Material UI has a effective way to set font size for all components. It also has quick ways for setting font size for components of the same type, and for individual components. I will show one example of each method. We will customize font size in the TextField, Container, and Typography as seen below: Full … Read more
ESLint comes with lots of default rules enabled. There are additional rules you can choose to enable. Sometimes we want these rules to be on for most of our files, but have a few exceptions. In this tutorial we will first disable all rules for a certain file path. Next, we will disable a single … Read more
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
The Material UI CircularProgress component is a quick way to give the user visual feedback while waiting for loading. It can be challenging to get the centering just right when the CircularProgress is nested in a component. Furthermore, the color prop is limited to MUI theme or color object values. We will explore how to … Read more
The FormControlLabel is composed of a FormControl, a Label, and whatever control component is passed in (checkbox, switch, radio). This means we have to explore the DOM to find classes to use as selectors and make sure we target the correct child element. Here’s what we will create in this tutorial: This post is part … Read more
The Material UI Switch component is has the same functionality as a checkbox while providing a more tangible look and feel. We can customize anything we want with the Switch, including the color, size, track and thumb. Here’s the Switch example that we will create. I will include DOM screenshots to show what classes are … Read 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 Material UI Container has a useful prop for disabling padding, but it does not have access to some of the spacing props that the Stack component has. In this post we will add padding, margin, background color, and border to the Container component using the sx prop. This post uses the same base code … Read more
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
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
