Exploring JavaScript Libraries
The no-unused-vars rule is one of the most important ESLint rules for keeping code clean. However, there are a few cases where we want exceptions to the rule. Also, we may want to change the default “eslint: recommended” values. My three favorite options are below: Allowing unused sibling values when using the Rest property Allowing … Read more
Many different options exist for fixing the “Missing file extension ‘tsx’ error”. Once it is fixed, you will be able to import from a TypeScript file. Often this error is present in create-react-app default setup when you try to use TypeScript files. After a lot of testing, I found three simple methods for fixing the … Read more
It is good practice to enforce syntax consistency and protect against known issues by banning certain types in TypeScript. The @typescript-eslint/ban-types rule is enabled and bans some upper casing and a few types by default. In this post we will explore how to add additional banned types to the rule, how to allow some or … Read more
The sx prop makes responsive design and styling a simple process. This post shows five different applications of breakpoints with sx: Responsive layout Changing background color Changing font size Breakpoints in nested selectors Conditionally passing style objects I believe the five tutorials below provide will provide guidance for almost any responsive design need you may … Read more
Hover styling is a common requirement for UI components. However, it can be challenging in MUI to get the syntax correct to add hover using the sx prop. In this tutorial I show how to add hover styling to the Box, Button, Paper, and TextField components. The components are below first with default styling and … Read more
The MUI Badge component requires knowledge of MUI default classes in order to properly style the component. In particular, you will need to create a nested selector that targets the MuiBadge-badge class in order to apply background color, centering, and sizing to the visible portion of the Badge component. Below is the Badge that we … Read more
The MUI Badge renders as two spans: one that wraps the anchor component and one that renders the ‘visible’ Badge area. This means click and hover events fire for the Badge even when the events occur on the anchor component. In this tutorial we will solve this problem. We will make the Material-UI Badge on … Read more
A difficult challenge when using Material-UI Badges is making sure they don’t get cut off or hidden when they overflow a component. Badges on the Tab component have this problem. Another challenge is making sure Badges don’t expand with a container and position far away from their anchor component. Badges on Buttons inside of Stacks … Read more
The Material-UI Avatar can be styled in a variety of ways. Styling the Avatar is less challenging than many other MUI components because it is a simple component, often composed of a single div or a div wrapping an image element. In this example I will add over half a dozen different styling properties to … Read more
Applying CSS box-shadow is such a common style requirement that the MUI team built 25 different shadow levels into the theme. In this post we’ll explore: What imports are needed for box shadow The difference in accessing box shadow from the theme object vs the styling system. How to use the elevation prop (a shortcut … Read more
