The Ultimate Guide to Material-UI Grid Containers and Items (MUI v5)

Material-UI Grid Containers and Items

The Material-UI Grid is unusual in the universe of MUI components: a Grid is composed of individual children Grids with either a container or item layout prop enabled. The container and item props affect how the child Grids render in the DOM and determine which additional props are available for use. I will show what … Read more

The Essential Guide to Material-UI Styled Components (MUI v5)

Material-UI version 5 made the styled API one of two primary component styling APIs. Unfortunately, the complexity of styled componenents in Material-UI increased exponentially. For example, now developers must decide: Should I use the styled API that wraps emotion? Should I use the styled API that wraps styled-components? Should I use styled components directly in … Read more

The Ultimate Guide to Material-UI Table Pagination (MUI v5)

Material-UI Table Pagination Example

Table pagination can be broken into two conceptual pieces: the UI interface for changing pages, and the paginated data request. Material-UI’s TablePagination component is a robust component for solving the UI interface. The MUI TablePagination component is a dynamic and highly customizable component. It has 18 props listed in the docs, and these control everything … Read more

The Material-UI Dialog Component With Every Prop Enabled and Explained (MUI v5)

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

The Definitive Guide to Material-UI Form Layout (MUI v5)

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

Every Material-UI Form Component Explained (MUI v5)

Forms are an important part of many web UIs.  Interestingly, Material-UI doesn’t have a form component.  It has seven form subcomponents (depending on what components you include), but simply relies on the native React Form component as a parent wrapper.  Alternatively, it could be argued the the FormControl component sometimes takes the place of the … Read more

The Ultimate Material-UI Custom Button Example (MUI v5)

The Material-UI (MUI) Button component merits a detailed exploration of all of its functionality. Its broad use across many UIs makes a deep knowledge of it’s props highly valuable. In this MUI Button demo I will create a new button variant (a great new feature in v5!), enable all props on it, and use it … Read more

The Ultimate Guide to the MUI ‘sx’ Prop

Material-UI (rebranded as MUI) recently released version 5, and there were significant changes to the syntax and systems used for styling components. Material-UI v4 relied on JSS and the makeStyles hook for component styling. MUI v5 has migrated to two options: styled API or sx API (<- definitely read this). The styled API creates a … Read more

The Complete Guide to Material-UI Button Color (using MUI v5)

MUI Button color is a core aspect of proper theming. Fortunately MUI 5 (previously branded as Material-UI) makes it easy to apply the color you want. I will also include Material-UI v4 styling techniques for Buttons where there is a version difference. There are a variety of ways to apply the color you need for … Read more

The Ultimate Guide to the New MUI Stack Component

The Ultimate Guide to the New Material-UI Stack Component

Material-UI (now MUI) has a variety of excellent layout components. The Stack component is new in version 5 and was created to easily handle one-dimensional vertical and horizontal layouts. Previously these were often handled with the Box component using a flex layout, or a Grid component, but Grids were intended for 2-d layouts. One of … Read more