Exploring JavaScript Libraries
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
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
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
The MUI Collapse component is an invisible wrapper that handles transition animation. It can be added to Tables, Cards, and almost any other MUI component to create an expandable area. I created three examples with the collapse component: two expand a Table Row and one expands the content area of a Card. Here’s a screenshot … Read more
The primary method for styling MUI v4 components is the makeStyles hook. MUI v5 recommends the sx prop or styled API, but the makeStyles hook is still supported. This post shows five interesting examples of hover styling using the makeStyles hook: hover on a label (uses v5 makeStyles import) hover on Buttons nested in a … Read more
The Autocomplete component is useful for giving the user limited options to select from. When a choice is selected it populates an Input subcomponent. Autocomplete has a ‘clear’ button for removing the selected choice. In this post we will: Add a custom clear event handler Style the clear button Remove the clear button The clear … Read more
The MUI Autocomplete component is great for giving users limited options to choose from in forms or other UI layouts. I will show how to get and set values, including default values, in the Autocomplete component. I will show how to use the Autocomplete’s data in a state value and also with a form submission. … Read more
