Exploring JavaScript Libraries
The Material-UI Grid is composed of individual children Grids with either a container or item layout prop enabled. The container and item props affect when and how spacing, padding, and margin can be used. We will explore how spacing renders in the DOM. For example, spacing={3} only adds padding-top and padding-left. This is by design. … Read more
This post build off of my code base for styling MUI Accordions. I explore the component’s expand/contract state in the DOM, the classes applied by MUI, and how to handle the click and change events. Here is the original Accordion styling post, plus a few other helpful posts: The Ultimate Guide to Styling and Customizing … Read more
MUI forms can be submitted using good old-fashioned HTML or submitted using React hooks for state tracking. In this tutorial I will look at the network traffic and code differences to compare and contrast. MUI uses the React Form component as a wrapper around MUI input subcomponents. In other words, MUI does not have it’s … Read more
MUI v5’s new styling system is built on emotion, a CSS library for writing CSS with JavaScript. I’ll show the difference in styling components using Emotion, the sx prop, and the styled API. However, there is fundamentally no difference because sx and styled both use emotion ‘under the hood’. Here are the TextFields we’ll create. … Read more
Adding a clear button to a Bootstrap Input element lets users clear text with a single click instead of clicking and tapping the delete key repeatedly. This is a much nicer experience. I created two design examples of how to add a clear button to the Bootstrap Input (also known as FormControl in react-bootstrap): We’ll … Read more
Material-UI Tabs are composed of several components: the Tabs component, child Tab components, and usually a container and tab panel. We can quickly add perfect styling to these elements with the sx prop and some nested selectors. Additionally, I will show the difference in Tab onClick, Tabs onChange, and which one is best to use. … Read more
The MUI Tabs component renders an indicator that gives a visual cue of which tab is selected. This indicator can be easily sized and styled in MUI v5 by using TabIndicatorProps. In this demo I will show what values TabIndicatorProps accepts and how to change width, height, and color of the tab indicator. Here are … Read more
Here are two simple ways to disable an HTML button: Set the button’s disabled attribute to true with JavaScript Set pointer-events: none; with CSS We should also lighten the button’s opacity by about 33% (that’s what Bootstrap disabled class does). In this post, I will show full JavaScript and CSS code for disabling HTML buttons. … Read more
The Material-UI Select component is a great user input component with a list of options. However, it is a bad experience to require a user to click into the component and press “backspace” to clear it. In this tutorial I will show how to add a clear button inside the Select. The biggest challenge is … Read more
In this tutorial we will create an easy way for a user to clear a Material-UI TextField. We’ll then use similar code for clearing the Input. The TextField component is composed of a Material-UI Input plus other components, so they behave similarly. I’ll first show how to clear the TextField with an external button press. … Read more
