How to Align Buttons in Material-UI Using the Box Component

Material-UI Buttons Aligned in Box

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. ***Update for MUI 5: Take a look at the new Stack component for handling one-dimensional vertical and horizontal layouts! Also, Material-UI moved to a new styling API where … Read more

How to Customize Material UI AppBar Color and Styling

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 … Read more

Dynamically Loading Material-UI Icons Using React Router Query Params

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 … Read more

How to Customize Material-UI TextField Text Color, Alignment, Width and Height

Material-UI is a fantastic React Component library. Customizing the components, especially TextField, often does not feel so fantastic. ***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply insert the styling code directly into the sx prop instead of using makeStyles and classes. I am … Read more

The Easiest Way to Implement Material-UI Table Search and Filter

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 React community has stepped up and provided several Material-UI search bar examples and solutions, two of which I will discuss in this article. … Read more

Customizing the Material-UI Theme Palette – Basic and Advanced Options

Create a custom-built Material-UI component that uses a custom theme palette color Material-UI is a slick and powerful component library for quickly building React apps. Material-UI’s theme palette is the foundation for uniquely theming your MUI components so that your app has a distinct “look and feel”. However, it can be challenging to extend the … Read more

How to Customize Material-UI Table Cell Width and Styling

Material-UI Table Cell Width

Customizing Material-UI Table Cell width is a common requirement. Precisely styling the TableCell component is also often requested by users. In this demo, I will show how to create a table sized with fixed width or a dynamic width that fits to the contents of the table cells. I will also set TableCell hover color … Read more

The Ultimate Guide To Material-UI Table Row Height

Material-UI’s table component is a versatile table capable of many customizations. However, finding the proper syntax for simple styling changes can sometimes be challenging. This guide will show you how to set row height for a table row. By default, MUI Table has a minimum height of about 56px that is difficult to override. Below … Read more

The Definitive Guide to React-Spring useTransition

Deconstructing useTransition examples from the documentation and creating an original example useTransition is a powerful tool for animating a list of text, images, or components with react-spring. However, I found the documentation and examples listed on the official site to be challenging for a new react-spring user to understand. Since I wanted a detailed explanation, I created … Read more

React-Spring vs Framer Motion: Comparing Examples in Two Animation Libraries

Framer Motion and react-spring both solve unique animation challenges and execute with high performance. Framer Motion uses the more traditional duration-and-location approach. Most developers likely have experience with this animation strategy and it will feel familiar. React-Spring approaches animations using spring-physics. This is a well-executed attempt to make animations feel and behave like real-life movement. … Read more