Exploring JavaScript Libraries
The Material-UI Autocomplete component and its Popper component can be styled by targeting built-in MUI styling APIs. The Popper is also called a dropdown or listbox. The difference is that Popper is the positioning element while Listbox is the visible list element. That’s why MUI Autocomplete has a prop for customizing the Popper (PopperComponent) and … Read more
Material-UI is compatible with the popular Styled Components library. While MUI normally uses JSS, devs can choose whichever styling library they prefer. Most of the Material-UI docs give examples using JSS and it can be difficult to figure out proper syntax for combining MUI with Styled Components. However, buried deep inside the MUI docs is … Read more
Material-UI does not (yet) have a built-in chart feature. However, they link to DevExtreme Reactive as a chart library worth taking a look at. The DevExtreme Reactive library uses D3 and Material-UI components to generate charts and legends. Looking at the charts in dev tools, it appears the charts are generally D3 SVGs and the … Read more
The Material-UI Box component is an excellent utility component for wrapping child components. With a bit of guidance, it is easy to precisely style and position the MUI Box. In this example, I’ll take two box components and apply a variety of styling to them as shown in the image: Here’s how to align Buttons … Read more
Styling hooks in Material-UI are an effective and exceptional tool for customizing components. However, the similarly-named hooks can be confusing to use. In this post, I’ll explain what each hook does, when to use it, and which hooks are recommended for certain situations. ***MUI 5 UPDATE: There is a new styling system in MUI 5. … Read more
Styling pseudo-classes and pseudo-elements in Material-UI can be challenging. It requires knowledge of two topics: Material-UI styling API and class selectors Proper JSS selector syntax In this article I’ll provide examples of selecting “pseudos” on a variety of Material-UI components. I’ll also discuss the difference between a pseudo-class and a pseudo element. ***UPDATE for MUI … Read more
The Material-UI Docs are often thorough and have many links to live code examples. However, while reading about StylesProvider I was unable to find live examples for many of the props. In this post I’ll show the effects of various settings for each prop. ***UPDATE for MUI 5: Material-UI moved to a new styling API … Read more
A default design pattern in Material-UI is to create rounded corners with border radius. There are several ways to customize border radius ‘once’ and to have it globally available: Creating a custom theme and globally overriding a component type’s borderRadius style value Creating a custom theme and changing the value of shape.borderRadius Creating a StyledComponent … Read more
CardActions in Material-UI are generally used to add components to the bottom of a Card. These are often icons wrapped in an IconButton. You may have several of these action components and need to align them precisely as desired. That can be done easily either with flex or margin, and we will explore examples of … Read more
Material-UI’s Card component has an aptly named composite component named CardMedia. As you likely guessed, it is intended to contain various kinds of media: video, audio, image, picture, and iframe. The CardMedia component is most commonly used for images, according to my keyword research. That’s not a surprise, but I still thought it would be … Read more
