Exploring JavaScript Libraries
Material-UI’s Box component is the perfect tool for constructing your layout precisely as desired. In this example I will wrap Buttons in the Box component and align left, center, and right with justifyContent. I will align vertically with alignItems. Then I will add margin and padding for additional spacing. This tutorial show both MUI v4 … Read more
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
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
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. The React community has created several Material-UI search bar examples and solutions, two of which I will discuss in this article. There is also no filter by … Read more
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 palette to fit your app’s distinct needs. ***UPDATED FOR MUI v5 In … Read more
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
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
This guide focuses on aligning items in every conceivable way in Material-UI Grid: aligning right, left, and horizontally centered; aligning top, bottom, and vertically centered. In this example I will use the Material-UI Grid, but the alignment principles apply for aligning all MUI components. You will learn how to align items in any vertical or … Read more
The Material-UI Grid Component is MUI’s grid system solution. It also has the features and APIs of MUI components that MUI users are familiar with. The question when considering using MUI Grid is: will this be superior to other grid alternatives? YouTube video version of this article here: https://youtu.be/YO5jGf3_-gc Flexbox, Bootstrap, and CSS Grid have proven … Read more
The Material-UI Skeleton gives a great visual treat to users of your website or app. It’s strength is that it makes the user feel as though the app is useful and useable before critical loading is completed. Let’s configure a Material-UI Skeleton Loader to display for 1 second OR the loading time of an API … Read more
