Exploring JavaScript Libraries
The Material-UI Dialog component is used for giving the user important information and blocking application interaction until the message is acknowledged. Interestingly, the component has far more props than the average MUI component: 19 props are listed in the docs. This is because the Dialog composition is complex (many layers of elements in the DOM), … Read more
Form layout in Material-UI is simple if you are aware of all the components and props at your disposal. In this post we will discuss some of the form subcomponents that give you control over positioning. Additionally, we will examine when to use the Grid component for form layout. There will be full code and … 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
JSS provides the underlying styling syntax and functionality in many UI libraries. For example, React Material-UI’s styling and theme system is directly built on the syntax seen in JSS. In these examples of different ways to write media queries in JSS, I will use react-jss. This library is provided by the JSS team and integrates … 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
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
The Material-UI Card Header component is a versatile component that can make Card layouts look great. Naturally I wondered: what does a Card look like with every single prop enabled? There are nine total props on the card header; I’ve actually only enabled eight of them because the disableTypography prop actually turns off two other … Read more
The flexbox module is a direction agnostic layout system made for managing the layout of a component. Flex is designed for optimizing layout when available space is unknown or dynamic. The flexbox layout includes props set on both parent and children elements to control child size and order. Read an incredibly detailed overview of the … Read more
