Exploring JavaScript Libraries
The Material-UI ListItemText subcomponent is perhaps the most commonly used child component in an MUI List. We’ll take a look at styling and using ListItemText props, and also how to use the component with the ListItemIcon component. Finally we’ll add a link to a ListItem and also show how to handle click events. First, however, … Read more
The Material-UI IconButton creates a clickable icon with all the props and behavior of a MUI Button. In this post we will learn how to add hover functionality such as opening a tooltip and changing color. We will also add an onClick handler and examine how IconButtons are rendered in the DOM. Before we examine … Read more
Material-UI does a good job of keeping Icon color and SVGIcon color simple to customize. A common approach is setting the color prop with a MUI theme color, like primary or secondary. However, if you want to use rgba or hex colors on MUI Icons, change background color, or change Icon color on hover, you … Read more
Bootstrap has a robust layout system with many options for setting or customizing padding. In this post I will focus on vertical and horizontal padding in Bootstrap v5, and I will also show v3 and v4 classes and systems for applying padding. Bootstrap has upgraded it’s default classes and it’s styling utilities in version 5. … Read more
Bootstrap makes layouts easy and has an excellent component library. However, sometimes it can be tricky to get buttons and other components aligned exactly as needed. In this tutorial I will build the grid shown below. It will have buttons aligned right, left, and vertically. I will show alignment with both flex CSS and bootstrap … Read more
Bootstrap is an immensely popular CSS and JS library that facilitates quick grid-style layouts. The library also has a significant number of components in its component library. My favorite thing about the Bootstrap component library is its simplicity. For example, a Button component is simply an html button element paired with Bootstrap’s btn class (and … Read more
Material-UI version 5 made the styled API one of two primary component styling APIs. Unfortunately, the complexity of styled componenents in Material-UI increased exponentially. For example, now developers must decide: My goal with this guide is to aid the 90% of developers who want a simple setup for using Styled Components with MUI. I will … Read more
Table pagination can be broken into two conceptual pieces: the UI interface for changing pages, and the paginated data request. Material-UI’s TablePagination component is a robust component for solving the UI interface. The MUI TablePagination component is a dynamic and highly customizable component. It has 18 props listed in the docs, and these control everything … Read more
The Material-UI Dialog component is used for giving the user important information and blocking application interaction until the message is acknowledged. Interestingly, the component has far more props than the average MUI component: 19 props are listed in the docs. This is because the Dialog composition is complex (many layers of elements in the DOM), … Read more
Form layout in Material-UI is simple if you are aware of all the components and props at your disposal. In this post we will discuss some of the form subcomponents that give you control over positioning. Additionally, we will examine when to use the Grid component for form layout. There will be full code and … Read more
