To give you the best information quickly, let’s start with the top takeaways from my experience in maximizing my organic search traffic. Screenshots of stats and articles, plus details about the process, will come afterwards.
Card components are a common UI building block, and they need to be versatile and customizable to handle a variety of needs. Material-UI Cards have a significant capacity to be tailored to fit your needs.
We’ll start with the JSX, then dive into targeting css classes on different card subcomponents. (Ignore the garish colors 😱. I made every section different to demonstrate the Material-UI style API. )
Many Material-UI components have incredible customizations out-of-the-box, while some are functional but missing nice-to-have options (I’m looking at you, Table-without-a-search-prop).
The Autocomplete component may have the most customization options of any MUI component I’ve seen. Chips, grouping, disabled options, multiselect, custom popup items, fixed options, and more are demoed in the docs.
Unfortunately, I found that custom styling the Popper and using the renderOption prop were challenging despite the existing examples. Therefore, I created this demo that fetches data from a Star Wars API and populates this custom styled Autocomplete component:
Have you ever seen an app display an alert that action is required, but didn’t give you the relevant link to take the action? Frustrating, isn’t it?
In this demo, we’ll make an alert that has a React Router Link in it:
Normally I like to take a Material-UI component and customize it in a challenging and useful way. However, the Backdrop component is a simple mask component that might be used with a modal or used to block a section of the screen while waiting for data to load.
With something this straight forward, I struggled with a creative customization. Instead, I decided to crowdsource the idea via Google search:
Many 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 a dev to fix them manually. Don’t worry, ESLint has a command for auto-fixing:
In this article I’ll discuss the flags available for ‘fix’, the types of issues (
layout) that ‘fix’ can resolve automatically, and options such as how to limit the…
In this demo, I’ll create slider thumbs that have images and set slider behavior based on slider position.
This guide focuses on two things:
Anytime you can get TypeScript typing working, it’s best to use it. However, there are times that applying TypeScript is so difficult that it is best to tactically disable it.
I’ll start with several methods of how to disable linting for a line or lines of code, because the how is factual. Then when is more opinionated, so take that with a grain of salt. The code snippets shown below can also be found in this Codesandbox.
In other news, TSLint was deprecated in late 2019 in favor of typescript-eslint. This makes a lot of sense, considering they are both…
Material-UI’s Paper component is intended exactly as it sounds: to give apps and components a paper-like background and feel.
The Paper component is often spaced and shadowed using padding, margin, and either the
outlined variant. In this demo, I’ll show the look and feel of four different Material-UI Tables wrapped in a Paper component with different styles and props. These tables are derived from a trimmed down version of the ‘basic table’ example in the Material-UI docs.
Codesandbox for this article is in the Resources section.
I have been: individual contributor | tech lead | manager | JS boot camp teacher | community college instructor.