MUI Stack: A Comprehensive Guide to the Material UI Stack Layout Component

The MUI Stack component is a powerful tool for creating flexible layouts in a Material UI project. The Stack simplifies arranging items in a one-dimensional layout by leveraging the core CSS flexbox properties and integrating them as props.

MUI Stack differs from the Grid component, designed for two-dimensional layouts. The Stack component is ideal for creating one-dimensional layouts, such as lists, navigation menus, and forms.

This tutorial will guide us through using and customizing the MUI Stack component. We will learn how to create flexible and responsive layouts, arrange items, and apply styling to the Stack component.

Arranging Items

The MUI Stack component leverages several core CSS flexbox properties, making them accessible as props. This functionality simplifies the task of arranging items either horizontally or vertically. Let’s explore these properties:

Direction

The direction prop determines the orientation of the Stack. By default, the direction is set to column, which arranges items vertically. To arrange items horizontally, we can set the direction to row.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function RowStack() {
  return (
    <Stack direction="row">
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Justify Content

The justifyContent prop aligns items along the main-axis. When the direction is set to column, the main-axis is the y-axis, and when the direction is set to row, the main-axis is the x-axis. The justifyContent prop accepts the following values:

• flex-start: Items are aligned to the start of the main-axis.
• center: Items are centered along the main-axis.
• flex-end: Items are aligned to the end of the main-axis.
• space-between: Items are evenly distributed along the main-axis.
• space-around: Items are evenly distributed along the main-axis, with equal space around them.
• space-evenly: Items are evenly distributed along the main-axis, with equal space around them and at the start and end.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function JustifyContentStack() {
  return (
    <Stack direction="row" justifyContent="space-between">
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Align Items

The alignItems prop aligns items along the cross-axis. When the direction is set to column, the cross-axis is the x-axis, and when the direction is set to row, the cross-axis is the y-axis. The alignItems prop accepts the following values:

• Flex-start: Items are aligned to the start of the cross-axis.
• center: Items are centered along the cross-axis.
• Flex-end: Items are aligned to the end of the cross-axis.
• stretch: Items are stretched to fill the container along the cross-axis.
• baseline: Items are aligned such that their baselines align.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function AlignItemsStack() {
  return (
    <Stack
      direction="row"
      alignItems="center"
      sx={{ height: "100px", border: "1px solid" }}
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Gap

The gap prop sets the space between items in the Stack. This prop accepts a numeric value multiplied by the theme’s spacing unit. For example, the value 1 corresponds to 8px.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function GapStack() {
  return (
    <Stack direction="row" gap={2}>
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Styling and Customization

The MUI Stack component supports all system properties and provides various styling and customization options to create visually appealing layouts.

Using Props for Styling

We can use different props provided by MUI to style the Stack component directly. These props offer a straightforward way to apply common styles.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function StyledStack() {
  return (
    <Stack
      direction="row"
      justifyContent="center"
      alignItems="center"
      p={2}
      gap={2}
      height="200px"
      bgcolor="primary.main"
      color="primary.contrastText"
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

Using sx for Advanced Styling

The sx prop is a powerful feature in MUI that allows for more advanced customization. It’s a superset of CSS, providing more control over the styling.

import React from "react";
import Stack from "@mui/material/Stack";
import Card from "@mui/material/Card";

function AdvancedStyledStack() {
  return (
    <Stack
      direction="row"
      justifyContent="center"
      alignItems="center"
      gap={2}
      sx={{
        bgcolor: "primary.main",
        color: "primary.contrastText",
        borderRadius: 4,
        p: 2,
        "& > *": {
          bgcolor: "secondary.main",
          color: "secondary.contrastText",
          p: 2,
          borderRadius: 4,
        },
      }}
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

In this example, we used the sx prop to define styles for the Stack and its children (using the & > * selector).

Responsive Layouts

The MUI Stack component is designed to create responsive layouts that adapt to different screen sizes. We can use the sx prop to define responsive styles based on breakpoints.

Let’s take the previous example and change the layout direction depending on the screen size:

...

function ResponsiveStack() {
  return (
    <Stack
      direction={{ xs: 'column', sm: 'row' }}
      ...
      }}
    >
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
    </Stack>
  );
}

The above example is an interactive demo. When resizing the window from the bottom right corner, the Stack layout changes from vertical to horizontal based on the screen size. The direction prop is set to column for extra-small (xs) screens and row for small (sm) and larger screens.

Conclusion

Using the MUI Stack component is an effective way to create and arrange elements efficiently. It has a specific opinionated use case, so it’s an excellent tool for creating one-dimensional layouts. In this tutorial, we learned how to use the core properties of the Stack component, apply styling, and create responsive layouts.

Bye for now 👋