SINGULARITY
DOCS
Reference
Paper
The Paper component serves as a container for presenting content on a raised surface.
Introduction
In Material Design, the appearance of surfaces and shadows draws inspiration from their physical equivalents in the real world.
Material UI brings this concept to life through the Paper component, a surface-like container that utilizes the
elevation prop to apply box-shadow values sourced from the theme.:::success The Paper component is well-suited for designs adhering to Material Design's elevation system, which aims to mimic the way light creates shadows in the physical environment.
If you require a general-purpose container, consider using the Box or Container components instead. :::
import * as React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
export default function SimplePaper() {
return (
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
'& > :not(style)': {
m: 1,
width: 128,
height: 128,
},
}}
>
<Paper elevation={0} />
<Paper />
<Paper elevation={3} />
</Box>
);
}Component
import Paper from '@mui/material/Paper';
Customization
Elevation
Apply the
elevation prop to create a visual hierarchy using shadows. The Paper component's default elevation is set to 1. This prop accepts values from 0 to 24, with higher values making the Paper appear farther from its background.In dark mode, elevating the Paper also lightens its background color. This effect is achieved by applying a semi-transparent gradient via the
background-image CSS property.:::warning Be cautious when overriding the Paper component in dark mode, as modifying the
background-color property alone won’t impact the lighter shading. To customize it, you must adjust both background-color and background-image or use a new background value. :::elevation=0
elevation=1
elevation=2
elevation=3
elevation=4
elevation=6
elevation=8
elevation=12
elevation=16
elevation=24
elevation=0
elevation=1
elevation=2
elevation=3
elevation=4
elevation=6
elevation=8
elevation=12
elevation=16
elevation=24
import * as React from 'react';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
textAlign: 'center',
color: theme.palette.text.secondary,
height: 60,
lineHeight: '60px',
}));
const darkTheme = createTheme({ palette: { mode: 'dark' } });
const lightTheme = createTheme({ palette: { mode: 'light' } });
export default function Elevation() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
{[lightTheme, darkTheme].map((theme, index) => (
<Grid key={index} size={6}>
<ThemeProvider theme={theme}>
<Box
sx={{
p: 2,
borderRadius: 2,
bgcolor: 'background.default',
display: 'grid',
gridTemplateColumns: { md: '1fr 1fr' },
gap: 2,
}}
>
{[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => (
<Item key={elevation} elevation={elevation}>
{`elevation=${elevation}`}
</Item>
))}
</Box>
</ThemeProvider>
</Grid>
))}
</Grid>
</Box>
);
}Variants
Use the
variant prop set to "outlined" to create a flat, outlined Paper without shadows:default variant
outlined variant
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
const DemoPaper = styled(Paper)(({ theme }) => ({
width: 120,
height: 120,
padding: theme.spacing(2),
...theme.typography.body2,
textAlign: 'center',
}));
export default function Variants() {
return (
<Stack direction="row" spacing={2}>
<DemoPaper variant="elevation">default variant</DemoPaper>
<DemoPaper variant="outlined">outlined variant</DemoPaper>
</Stack>
);
}Corners
By default, the Paper component has rounded corners. To achieve square corners, include the
square prop:rounded corners
square corners
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
const DemoPaper = styled(Paper)(({ theme }) => ({
width: 120,
height: 120,
padding: theme.spacing(2),
...theme.typography.body2,
textAlign: 'center',
}));
export default function SquareCorners() {
return (
<Stack direction="row" spacing={2}>
<DemoPaper square={false}>rounded corners</DemoPaper>
<DemoPaper square>square corners</DemoPaper>
</Stack>
);
}Anatomy
The Paper component consists of a single root
<div> element that encloses its content:<div className="MuiPaper-root"> </div>