Exploring JavaScript Libraries
The MUI Grid container can have full width and height styling applied with only a few lines of code. The default width behavior is for the Grid container to expand to 100% of its parent. The height only needs a height set in its sx prop. I’ll create two tutorials with full code for setting … Read more
The Material-UI Typography component is excellent for styling text within a layout. We can quickly add font style, font weight, and text overflow styling. In this MUI Typography tutorial, I will create a Typography component with default styling and then add italic, bold, and ellipses to it. Full React code for this example is in … Read more
The MUI Typography component is excellent for precisely styling text. Typography can also be used to align text inside of a wrapping Box, Stack, or other component. In this tutorial we will add flex to the parent to align the Typography component. We will create the five examples below. The first three are wrapped in … Read more
The justify-content CSS property is the most commonly used flexbox modifier, according to my analysis of search trends. In MUI, we usually see camel-case justifyContent syntax because MUI often uses JavaScript to apply styling. To paraphrase MDN, justify-content controls space between and around child elements along the main axis of a container. The “main axis” … Read more
The flex-grow property is one of many properties available as part of the CSS flexbox layout. flex-grow is applied to children of an element with display: flex. The flex-grow property allows the children to be laid out proportionally, for example: The flex-grow property will not always behave as expected. It respects minimum width values in … Read more
The Speed Dial component is a useful way to preserve screen space and efficiently show action options. The Speed Dial size, color, hover, and other styles can be customized by targeting the proper nested selectors with the sx prop. In this post I will fork the Basic Speed Dial example from the MUI docs, and … Read more
Material-UI makes importing and using icons simple. We can quickly use MUI Icons in a React project, even if we don’t use any other MUI components. In this tutorial I will show a basic example of using a Material-UI icon in a React project. Then I will show how to use icons inside of other … Read more
Material-UI offers several different APIs or systems for styling components. It can be difficult to know which is the right to use from a clean code perspective. In this post I will explain the similarities and differences between sx, styled, and theme overrides in MUI. Here’s an important point: all three styling options can accomplish … Read more
The MUI Box is a utility component for controlling the layout of child components. It has a few handy styling shortcuts such as m (a shortcut for margin) and p (padding). It renders as a div. The Box can use all the HTML attributes that a div can use. In this post we’ll explore click … Read more
A handful of UI libraries have a spacer component that adds space outside of components to keep component layout decoupled. This post suggested creating one for React, and I thought that was a good idea. I created a component named Spacer that wraps the MUI Divider, strips out the visible aspects (more on that later), … Read more
