Skip to content

PigmentStack API

API reference docs for the React PigmentStack component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import PigmentStack from '@mui/material/PigmentStack';
// or
import { PigmentStack } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
childrennode-

The content of the component.

direction'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| { lg?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', md?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', sm?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', xl?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', xs?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row' }		'column'

Defines the flex-direction style property. It is applied for all screen sizes.

dividernode-

Add an element between each child.

spacingArray<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string		0

Defines the space between immediate children.

sxArray<func
| object
| bool>
| func
| object		-

The system prop, which allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

The component cannot hold a ref.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.