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 the most important features of the Stack component is that it is a “CSS Utility Component”. This means that quick styling systems are available via simple props such as gap, width, and mt (margin-top). I’ll demo several of these below.
We’ll also explore the classes available for styling the Stack component. A Code Sandbox link with full React code is available in the Resources section. Here’s a YouTube version of this post.
Stack Props and API
The Stack component has lots of spacing and layout props available. It also has access to a styling prop called sx, (Read a full guide to the new sx styling prop here). Understanding these props will allow you to use the Stack component to its fullest potential.
<Stack
direction={{ xs: "column-reverse", sm: "row" }}
component={Paper}
spacing={{ xs: 2, sm: 4 }}
gap={2}
//width={120}
divider={
<div
style={{
width: "100%",
height: 1,
backgroundColor: "black"
}}
/>
}
className={classes.root}
sx={{ backgroundColor: "primary.main", borderRadius: 2 }}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>The direction prop may most commonly be used to set a row (horizontal) and column (vertical) layout. However, it has additional values such as column-reverse, which I use above. It also has a clever “built-in” way to use theme breakpoint values, which you can see in my code above. A list of possible values is pictured below. “Column” is the default.
The component prop is used to change the root element rendered by the Stack component. The default is div. I show an example of passing in a Paper component later on in the styling section. It changes the root div to Paper, which means in the DOM MUI has rendered the element and classes that comprise a “Paper” component.
The divider prop is similar to the component prop, except that it controls what element is rendered in the DOM between the Stack’s children components. In my code above I passed in a custom styled div. A common choice is to pass in a MUI Divider component.
The remaining prop listed in the docs is spacing. It can be passed either inside the sx prop or on its own. Additionally, I passed gap and width as their own props instead of inside sx. These last two were not listed in the docs but are available.
- The
spacingprop adds padding to the children items. It will automatically either be top and bottom padding or left and right padding depending on thedirectionprop value. - The gap prop adds a CSS row-gap or column-gap value (see the dev tools screenshot below).
- The width prop is simply a quick way to set width. You likely don’t want to add the width prop if the direction might flip to row based on breakpoints.
Background Color and Border Radius with the Stack sx Prop
The sx prop is a quick way to pass any valid CSS. It can also be used with the MUI spacing system to pass shorthand spacing props. It even has access to theme values that can be used with valid CSS attributes.
I used the sx prop to pass background color and border radius: sx={{ backgroundColor: "primary.main", borderRadius: 2 }}. Keep in mind that styling via className will override styling from the sx prop.
Stack Styling and Classes
The Stack component by default does not have any MUI classes applied to it. This is unusual among MUI components; most have a class at the root level that is called something like Mui<Component>-root. Likely this was done because there are so many customizations available through the sx prop.
A simple way to style the Stack component is by adding a root class with makeStyles and the className prop. We can add any border color and border radius here instead of with the sx prop.
//styles
const useStyles = makeStyles({
root: {
backgroundColor: "grey",
borderRadius: 5,
"& :first-child": {
backgroundColor: "red"
}
}
});
//JSX
<Stack
className={classes.root}
/>Here I’ve added a grey background color to Stack, plus styled the first child with a red background. Notice there is not a default class in the DOM (i.e. no .MuiStack-root class), only the root class I’ve added and a class applied by the styling props.
A way to add a default class for styling purposes is to use the component prop. For example, if I add component={Paper} then the DOM updates to include Paper default classes:
