Exploring JavaScript Libraries
Material-UI provides several ways to style the height and width of TextFields, and you need to choose the correct way for your particular situation. I will show full code examples plus DOM screenshots for the following methods of adding height and width: Width can be set at the root level, but height requires some knowledge … Read more
The ESLint jsx-a11y plugin helps developers create accessible websites for all users. The plugin has 36 rules (as of publishing this post) for writing WCAG and WAI-ARIA compliant code. In this post I will give three examples of breaking the interactive-supports-focus rule and the solution. Each example will have: Offending code that broke the interactive-supports-focus … Read more
It may sound simple to create square IconButtons and “regular” Buttons in MUI. However, it requires more than just height and width being set to the same value. You also need to know the following: Which Button component should I use? How do I strip off default padding and margin? What classes can I target … Read more
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
