Material-UI Button onClick (and More Events) With TypeScript

MUI 5 is here, but many things are the same as Material-UI 4. Button props haven’t changed much and the look-n-feel of the Button component is as slick as ever. Whether you are using Material-UI 4 or 5, the Button code in this demo will be the same. There is a new alignment component called … Read more

How to Style the Material-UI Autocomplete Component

The Material-UI Autocomplete component and its Popper component can be styled by targeting built-in MUI styling APIs. In this demo I’ll show the selectors required for styling the Autocomplete component. I’ll do basic styling such as font size, border, hover color. An important characteristic of the Autocomplete component is that it has a Popper that … Read more

Exploring the Five Most-Used eslint-plugin-jsx-a11y Rules

ESLint is a fantastic tool that makes it easy for developers to follow accepted standards. ESLint plugins enhance our coding environment with subsets of standards. In this post we’ll look at jsx-a11y and five of the most-used (by Google search volume) WCAG and WAI-ARIA accessibility guidelines it enforces. If you need an overview of eslint-plugin-jsx-a11y … Read more

Using ESLint Plugin jsx-a11y With Recommended and Custom Rules

eslint plugin jsx-a11y

Creating “Accessible” web apps is both courteous and a business-savvy goal. Ease of use for the physically impaired increases the potential user base for the apps and may generate good will with users who appreciate such gestures. The ESLint plugin jsx-a11y (also known as eslint-plugin-jsx-a11y) gives developers warnings in their IDE if their code might … Read more

Add Hover Styling to a Material-UI Button with Styled Components

Material-UI is compatible with the popular Styled Components library. While MUI normally uses JSS, devs can choose whichever styling library they prefer. Most of the Material-UI docs give examples using JSS and it can be difficult to figure out proper syntax for combining MUI with Styled Components. However, buried deep inside the MUI docs is … Read more

JSS vs Styled Components: Deciding Which to Use

JSS and Styled Components are two excellent styling libraries with wide usage, strong features, and popular support. As of September 2021, both libraries are hovering around the 2.5 million weekly downloads mark. If you are comparing JSS vs Styled Components for a new project, the below examples and guide should help you make a decision. … Read more

How to Create a Material-UI Pie Chart and Legend

Material-UI does not (yet) have a built-in chart feature. However, they link to DevExtreme Reactive as a chart library worth taking a look at. The DevExtreme Reactive library uses D3 and Material-UI components to generate charts and legends. Looking at the charts in dev tools, it appears the charts are generally D3 SVGs and the … Read more

How To Style The Material-UI Box Component

The Material-UI Box component is an excellent utility component for wrapping child components. With a bit of guidance, it is easy to precisely style and position the MUI Box. In this example, I’ll take two box components and apply a variety of styling to them as shown in the image: Here’s how to align Buttons … Read more

Three Ways to Create Media Queries in JSS

JSS provides the underlying styling syntax and functionality in many UI libraries. For example, React Material-UI’s styling and theme system is directly built on the syntax seen in JSS. In these examples of different ways to write media queries in JSS, I will use react-jss. This library is provided by the JSS team and integrates … Read more

Material-UI makeStyles, useStyles, createStyles, and withStyles Explained

Material-UI makeStyles, useStyles, createStyles, and withStyles

Styling hooks in Material-UI are an effective and exceptional tool for customizing components. However, the similarly-named hooks can be confusing to use. In this post, I’ll explain what each hook does, when to use it, and which hooks are recommended for certain situations. ***MUI 5 UPDATE: There is a new styling system in MUI 5. … Read more