Paper

Paper

Paper 컴포넌트는 올려진(elevated) 표면에 콘텐츠를 표시하기 위한 컨테이너예요.

출처: 문서

본문

소개 (Introduction)

Material Design에서 표면 컴포넌트와 그림자 스타일은 현실 세계의 물리적 대응물에 크게 영향을 받아요.

Material UI는 이 개념을 Paper 컴포넌트로 구현해요. 테마에서 box-shadow 값을 가져오는 elevation prop을 특징으로 하는 컨테이너형 표면이에요.

:::success Paper 컴포넌트는 Material Design의 elevation 시스템을 따르는 디자인에 가장 적합해요. 이 시스템은 빛이 물리적 세계에서 그림자를 드리우는 방식을 재현하려는 것이에요.

그냥 일반적인 컨테이너가 필요하다면 Box나 Container를 선호할 수 있어요. :::

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

elevation prop을 사용해 그림자를 통해 위계(hierarchy)를 만들어요. Paper 컴포넌트의 기본 elevation 레벨은 1이에요. 이 prop은 0에서 24까지 값을 받아요. 숫자가 높을수록 Paper가 배경에서 더 멀리 떨어져 보여요.

다크 모드에서는 elevation을 높일수록 배경색도 더 밝아져요. 이는 background-image CSS 속성으로 반투명 그라데이션을 적용해서 이루어져요.

:::warning 앞서 언급한 다크 모드 동작은 Paper를 오버라이드할 때 혼란을 줄 수 있어요. background-color 속성을 바꿔도 더 밝은 음영에는 영향이 없기 때문이에요. 오버라이드하려면 새 배경 값을 사용하거나, background-color와 background-image 두 값 모두를 커스터마이즈해야 해요. :::

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)

그림자가 없는 평평한 outlined Paper를 만들려면 variant prop을 "outlined"로 설정해요:

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)

Paper 컴포넌트는 기본적으로 둥근 모서리를 가지요. 사각 모서리를 위해 square prop을 추가해요:

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)

Paper 컴포넌트는 내용을 감싸는 단일 루트 <div>로 구성돼요:

<div class="MuiPaper-root">
  <!-- Paper contents -->
</div>

Paper API

데모 (Demos)

이 React 컴포넌트의 사용에 관한 예제와 자세한 내용은 컴포넌트 데모 페이지를 방문하세요:

• Card
• Menubar
• Paper

Import

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

Props

Note: ref는 루트 요소(HTMLDivElement)로 전달돼요.

제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달돼요.

테마 기본 props (Theme default props)

MuiPaper을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

소스 코드 (Source code)

이 페이지에서 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보세요.

• /packages/mui-material/src/Paper/Paper.js

더 알아보기 (Learn more)