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.
Material-UI is a popular component library with excellent functionality and slick styling. Sometimes, however, we need just a bit more than what is available “out-of-the-box”.
Material-UI comes with a Table component with significant customizations and styling options. The Table even includes a sticky header option. However, it does not have a prop for setting ‘sticky column’. We will solve that with a quick, light-weight styling solution.
First, let’s discuss the above CSS. Then we’ll discuss precisely which components to apply it to.
A primary goal of modern libraries like React and frameworks like Angular is to abstract away from the DOM. However, sometimes there is still a need for manipulating elements directly. When this is required, querySelector and querySelectorAll are likely the right tools for the job.
document.querySelector() accepts a string which it uses as a CSS selector for selecting elements in the DOM. The first element that matches is returned.
Material-UI’s Box component is the perfect tool for constructing your layout precisely as desired. Simply wrap a component with Box and set internal margin, padding, and more.
Let’s take a look at an example of Material-UI Button position. In this example, a button is aligned top-left, center-center, and bottom-right, respectively in each box. I’ve added a border to the Box components just for visibility.
Material-UI AppBar is a useful component for positioning titles, hamburger menus, admin buttons, and more. Styling the AppBar background color, text color, positioning, font, and any other CSS property is a common need and can be tricky to figure out.
This demo will show several methods for customizing the AppBar, with a particular focus on setting text and background color.
The Codesandbox for this appbar example is in the resources section.
React-Router is a highly popular routing library. As of the beginning of 2021, it has more than 4 million weekly downloads:
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.
The purpose of this tutorial is to demonstrate how to use query params in React Router, including using nested routes. However, instead of a boring how-to, I created a tutorial that includes:
useHistoryReact Router Hook.
useLocationReact Router Hook.
In this demo, we will build an app that takes a user-input MUI icon name, routes to appropriate components with the icon name as a query param (because we’re demoing that), extracts the icon name from the…
Material-UI is a fantastic React Component library. Customizing the components, especially TextField, often does not feel so fantastic.
TextField is composed of smaller Material-UI components: primarily FormControl, InputLabel, and Input. Additional subcomponents may be involved depending on the TextField
Take a look at the DOM elements generated by a simple TextField. The div with class
MuiFormControl-root and everything under it comes courtesy of a single
A search bar on a UI table is a feature many users have come to expect. However, the Material-UI Table component does not have an out-of-the-box search feature. Not to worry, the dev community has stepped up and provided a number of potential solutions, two of which I will discuss in this article.
If you need a no-frills search bar to inject above a Material-UI Table component, material-ui-search-bar is a great option. It is a library that simply provides this one component, and as such, is light weight. …
I have been: individual contributor | tech lead | manager | JS boot camp teacher | community college instructor. I know what sets new devs up for success.