Exploring JavaScript Libraries
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
MUI 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 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
The Material-UI List component is handy because it has lots of out-of-the-box functionality. Take a look at the following API’s the List examples in the docs hook into: However, finding example beyond the docs, or simply understanding clearly how to use some of the customizations, can be challenging. In this demo we use the Checkbox … Read more
The Material-UI Select component creates a slick menu for users to choose from a list of options. The standard Select uses a dropdown (created from a Popover component) and the native Select uses the html option element. Both of these variations of the component can have checkboxes enabled. The standard Select can easily have checkboxes … Read more
React-Router is a highly popular routing library. As of the beginning of 2021, it has more than 4 million weekly downloads: One of the core pieces of react-router is the Link component. This versatile component has props for customizing routing, passing routing params as objects, styling, history, and more. Let’s build an app that demonstrates … Read more
The Material-UI Popover is a handy component for giving quick information to users. However, it has characteristics of both tooltip and modal components, so it has some quirks. In this example, we’ll position the popover relative to it’s anchor element and also relative to the click position in the window. Furthermore, we’ll transform the starting … Read more
The Material-UI Container is a great all-purpose layout component. The fluid container makes it even easier to center and size components exactly as you want them. How? The fluid container expands and contracts with screen size according to a simple maxWidth prop easily passed to the component. If you want to convert the below tutorial … Read more
The Material-UI DataGrid component is designed for interacting with large data sets. However, it can be tricky to get the layout exactly like you want. ***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. I include code for both MUI v4 and v5 where necessary. Styling code … Read more
Many React projects have ESLint set up and devs are fixing lint errors as they code. This is great for reducing bugs, and keeping code cleanly formatted. However, sometimes there’s a situation where a project can have a lot of linting errors (i.e. adding ESLint to an existing project) and it would be tedious for … Read more
