Get the perfect spacing and layout with Material-UI Paper component

Image for post
Image for post
Photo by Kelly Sikkema on Unsplash

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 elevation or 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.


Image for post
Image for post
Photo by Kelly Sikkema on Unsplash

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.

Sticky Column CSS

position: "sticky", 
left: 0,
background: "white"

First, let’s discuss the above CSS. Then we’ll discuss precisely which components to apply it to.

position: "sticky" means the element is treated as position: "relative" until it's…


There’s still room for Web APIs

Image for post
Image for post
Photo by Josh Gordon on Unsplash

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.

The Selectors API was released in 2013. It is a Web API, not actually part of the JavaScript language, even though the syntax looks like JavaScript.

Usage

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. document.querySelectorAll()


An excellent utility component for managing layouts

Image for post
Image for post
Photo by Rahul Chakraborty on Unsplash

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.

Justify and Align Button components

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.


Control the color scheme of MUI AppBar text, background, and more.

Image for post
Image for post
Photo by Sam Moqadam on Unsplash

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.

Method 1: Styling With Classes


Exploring to, ref, and component props, NavLink and more

Image for post
Image for post
Photo by JJ Ying on Unsplash

React-Router is a highly popular routing library. As of the beginning of 2021, it has more than 4 million weekly downloads:


Combine low competition keywords and Medium’s high Domain Score to get to Page One of Google Results

Image for post
Image for post
Photo by Michael Dziedzic on Unsplash

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.

Key Takeaways for Your Keyword Research:

  • It matters 😃
  • Medium has a high DS (Domain Score), meaning it is a great platform for ranking well in Google results
  • Use a tool like Ubersuggest to identify low competition keywords in your niche. Don’t target broad topics, instead target specifically searched phrases
  • After identifying a target phrase, check if there are other Medium articles that return as results for that phrase. …


Know how to implement query params in your next React Router app

Aerial view of road
Aerial view of road
Photo by Steve Medwin on Unsplash.

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:

  • Dynamically loading Material-UI (MUI) icons.
  • Using Material-UI Buttons as React Router Links.
  • Programmatically setting the route using the useHistory React Router Hook.
  • Extracting query params using the useLocation React 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…


Image for post
Image for post
Photo by Federico Respini on Unsplash

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 variant specified.

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 <TextField> tag.


Add search functionality to your Material-UI table with only a few lines of code

Image for post
Image for post

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.

Option 1: material-ui-search-bar Library

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. …

Jon Middaugh

I have been: individual contributor | tech lead | manager | JS boot camp teacher | community college instructor. I know what sets new devs up for success.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store