카드

카드 (Card)

카드는 단일 주제에 대한 콘텐츠와 동작을 담아요.

출처: 문서

본문

카드는 단일 주제에 대한 콘텐츠와 동작을 표시하는 표면이에요. Material UI Card 컴포넌트는 다양한 사용 사례를 처리하기 위한 여러 보완 유틸리티 컴포넌트를 포함해요:

  • Card: 관련 컴포넌트를 그룹화하는 표면 수준의 컨테이너예요.
  • Card Content: Card 콘텐츠의 래퍼예요.
  • Card Header: Card 헤더용 선택적 래퍼예요.
  • Card Media: 이미지, 비디오 등을 표시하기 위한 선택적 컨테이너예요.
  • Card Actions: 버튼 집합을 그룹화하는 선택적 래퍼예요.
  • Card Action Area: 사용자가 Card의 특정 영역과 상호작용할 수 있게 해 주는 선택적 래퍼예요.
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const bull = (
  <Box
    component="span"
    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
  >
    •
  </Box>
);

export default function BasicCard() {
  return (
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography gutterBottom sx={{ color: 'text.secondary', fontSize: 14 }}>
          Word of the Day
        </Typography>
        <Typography variant="h5" component="div">
          be{bull}nev{bull}o{bull}lent
        </Typography>
        <Typography sx={{ color: 'text.secondary', mb: 1.5 }}>adjective</Typography>
        <Typography variant="body2">
          well meaning and kindly.
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

기본 (Basics)

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';

:::success 카드가 여러 동작, UI 컨트롤, 오버플로우 메뉴를 지원할 수 있지만, 절제를 지키고 카드가 더 복잡하고 상세한 정보로 들어가는 진입점이라는 점을 기억하세요. :::

아웃라인 카드 (Outlined Card)

variant="outlined"을 설정하면 아웃라인 카드가 렌더링돼요.

import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const bull = (
  <Box
    component="span"
    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
  >
    •
  </Box>
);

const card = (
  <React.Fragment>
    <CardContent>
      <Typography gutterBottom sx={{ color: 'text.secondary', fontSize: 14 }}>
        Word of the Day
      </Typography>
      <Typography variant="h5" component="div">
        be{bull}nev{bull}o{bull}lent
      </Typography>
      <Typography sx={{ color: 'text.secondary', mb: 1.5 }}>adjective</Typography>
      <Typography variant="body2">
        well meaning and kindly.
        <br />
        {'"a benevolent smile"'}
      </Typography>
    </CardContent>
    <CardActions>
      <Button size="small">Learn More</Button>
    </CardActions>
  </React.Fragment>
);

export default function OutlinedCard() {
  return (
    <Box sx={{ minWidth: 275 }}>
      <Card variant="outlined">{card}</Card>
    </Box>
  );
}

복잡한 상호작용 (Complex Interaction)

데스크톱에서는 카드 콘텐츠가 확장될 수 있어요. (아래쪽 갈매기 모양 아이콘을 클릭해 레시피를 보세요.)

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Collapse from '@mui/material/Collapse';
import Avatar from '@mui/material/Avatar';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { red } from '@mui/material/colors';
import FavoriteIcon from '@mui/icons-material/Favorite';
import ShareIcon from '@mui/icons-material/Share';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import MoreVertIcon from '@mui/icons-material/MoreVert';

interface ExpandMoreProps extends IconButtonProps {
  expand: boolean;
}

const ExpandMore = styled((props: ExpandMoreProps) => {
  const { expand, ...other } = props;
  return <IconButton {...other} />;
})(({ theme }) => ({
  marginLeft: 'auto',
  transition: theme.transitions.create('transform', {
    duration: theme.transitions.duration.shortest,
  }),
  variants: [
    {
      props: ({ expand }) => !expand,
      style: {
        transform: 'rotate(0deg)',
      },
    },
    {
      props: ({ expand }) => !!expand,
      style: {
        transform: 'rotate(180deg)',
      },
    },
  ],
}));

export default function RecipeReviewCard() {
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardHeader
        avatar={
          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
            R
          </Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title="Shrimp and Chorizo Paella"
        subheader="September 14, 2016"
      />
      <CardMedia
        component="img"
        height="194"
        image="/static/images/cards/paella.jpg"
        alt="Paella dish"
      />
      <CardContent>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          This impressive paella is a perfect party dish and a fun meal to cook
          together with your guests. Add 1 cup of frozen peas along with the mussels,
          if you like.
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites">
          <FavoriteIcon />
        </IconButton>
        <IconButton aria-label="share">
          <ShareIcon />
        </IconButton>
        <ExpandMore
          expand={expanded}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </ExpandMore>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography sx={{ marginBottom: 2 }}>Method:</Typography>
          <Typography sx={{ marginBottom: 2 }}>
            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
            aside for 10 minutes.
          </Typography>
          <Typography sx={{ marginBottom: 2 }}>
            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
            medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
            occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
            large plate and set aside, leaving chicken and chorizo in the pan. Add
            pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
            stirring often until thickened and fragrant, about 10 minutes. Add
            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
          </Typography>
          <Typography sx={{ marginBottom: 2 }}>
            Add rice and stir very gently to distribute. Top with artichokes and
            peppers, and cook without stirring, until most of the liquid is absorbed,
            15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
            mussels, tucking them down into the rice, and cook again without
            stirring, until mussels have opened and rice is just tender, 5 to 7
            minutes more. (Discard any mussels that don&apos;t open.)
          </Typography>
          <Typography>
            Set aside off of the heat to let rest for 10 minutes, and then serve.
          </Typography>
        </CardContent>
      </Collapse>
    </Card>
  );
}

미디어 (Media)

이미지를 사용해 콘텐츠를 강화하는 카드의 예제예요.

import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

export default function MediaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        sx={{ height: 140 }}
        image="/static/images/cards/contemplative-reptile.jpg"
        title="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          Lizards are a widespread group of squamate reptiles, with over 6,000
          species, ranging across all continents except Antarctica
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

기본적으로 <div> 요소와 배경 이미지 의 조합을 사용해 미디어를 표시해요. 이것이 어떤 상황에서는 문제가 될 수 있어요. 예를 들어 비디오나 반응형 이미지를 표시하고 싶을 수도 있죠. 이런 사용 사례에서는 component prop을 사용하세요:

import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

export default function ImgMediaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component="img"
        alt="green iguana"
        height="140"
        image="/static/images/cards/contemplative-reptile.jpg"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          Lizards are a widespread group of squamate reptiles, with over 6,000
          species, ranging across all continents except Antarctica
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

주요 동작 (Primary action)

종종 카드는 그 표면 전체와 사용자가 상호작용해 주요 동작(확장, 다른 화면으로의 링크, 기타 동작)을 트리거하도록 허용해요. 카드의 동작 영역은 콘텐츠를 CardActionArea 컴포넌트로 감싸 지정할 수 있어요.

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import CardActionArea from '@mui/material/CardActionArea';

export default function ActionAreaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardActionArea>
        <CardMedia
          component="img"
          height="140"
          image="/static/images/cards/contemplative-reptile.jpg"
          alt="green iguana"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

카드는 또한 주요 동작 영역과 분리되어 있어야 하는 보조 동작을 제공할 수 있어요. 이벤트가 겹치지 않도록 말이죠.

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import CardActionArea from '@mui/material/CardActionArea';
import CardActions from '@mui/material/CardActions';

export default function MultiActionAreaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardActionArea>
        <CardMedia
          component="img"
          height="140"
          image="/static/images/cards/contemplative-reptile.jpg"
          alt="green iguana"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
      </CardActions>
    </Card>
  );
}

UI 컨트롤 (UI Controls)

카드 내부의 보조 동작은 아이콘, 텍스트, UI 컨트롤을 사용해 명시적으로 표시하며, 보통 카드 하단에 배치돼요.

다음은 미디어 컨트롤 카드의 예제예요.

import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import SkipNextIcon from '@mui/icons-material/SkipNext';

export default function MediaControlCard() {
  const theme = useTheme();

  return (
    <Card sx={{ display: 'flex' }}>
      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
        <CardContent sx={{ flex: '1 0 auto' }}>
          <Typography component="div" variant="h5">
            Live From Space
          </Typography>
          <Typography
            variant="subtitle1"
            component="div"
            sx={{ color: 'text.secondary' }}
          >
            Mac Miller
          </Typography>
        </CardContent>
        <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
          <IconButton aria-label="previous">
            {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
          </IconButton>
          <IconButton aria-label="play/pause">
            <PlayArrowIcon sx={{ height: 38, width: 38 }} />
          </IconButton>
          <IconButton aria-label="next">
            {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
          </IconButton>
        </Box>
      </Box>
      <CardMedia
        component="img"
        sx={{ width: 151 }}
        image="/static/images/cards/live-from-space.jpg"
        alt="Live from space album cover"
      />
    </Card>
  );
}

활성 상태 스타일 (Active state styles)

Card가 활성 상태일 때 스타일을 커스터마이즈하려면, Card Action Area 컴포넌트에 data-active 속성을 붙이고 아래처럼 &[data-active] 셀렉터로 스타일을 적용할 수 있어요:

import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import CardActionArea from '@mui/material/CardActionArea';

const cards = [
  {
    id: 1,
    title: 'Plants',
    description: 'Plants are essential for all life.',
  },
  {
    id: 2,
    title: 'Animals',
    description: 'Animals are a part of nature.',
  },
  {
    id: 3,
    title: 'Humans',
    description: 'Humans depend on plants and animals for survival.',
  },
];

function SelectActionCard() {
  const [selectedCard, setSelectedCard] = React.useState(0);
  return (
    <Box
      sx={{
        width: '100%',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(min(200px, 100%), 1fr))',
        gap: 2,
      }}
    >
      {cards.map((card, index) => (
        <Card key={card.id}>
          <CardActionArea
            onClick={() => setSelectedCard(index)}
            data-active={selectedCard === index ? '' : undefined}
            sx={{
              height: '100%',
              '&[data-active]': {
                backgroundColor: 'action.selected',
                '&:hover': {
                  backgroundColor: 'action.selectedHover',
                },
              },
            }}
          >
            <CardContent sx={{ height: '100%' }}>
              <Typography variant="h5" component="div">
                {card.title}
              </Typography>
              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                {card.description}
              </Typography>
            </CardContent>
          </CardActionArea>
        </Card>
      ))}
    </Box>
  );
}

export default SelectActionCard;

🎨 영감이 필요하다면 MUI Treasury의 커스터마이즈 예제를 확인해 보세요.

Card API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
raised bool false No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (Paper).

Inheritance

위에서 명시적으로 문서화되지 않았지만, Paper 컴포넌트의 props는 Card에서도 사용할 수 있어요.

Theme default props

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

CSS

Rule name

Global class Rule name Description
- root Styles applied to the root element.

Source code

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

CardActionArea API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
slotProps { focusHighlight?: func | object, root?: func | object } {} No
slots { focusHighlight?: elementType, root?: elementType } {} No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.

Note: The ref is forwarded to the root element (HTMLButtonElement).

Any other props supplied will be provided to the root element (ButtonBase).

Inheritance

위에서 명시적으로 문서화되지 않았지만, ButtonBase 컴포넌트의 props는 CardActionArea에서도 사용할 수 있어요.

Theme default props

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

Slots

Name Default Class Description
root ButtonBase .MuiCardActionArea-root The component that renders the root.
focusHighlight span .MuiCardActionArea-focusHighlight The component that renders the focusHighlight.

CSS

Rule name

Global class Rule name Description
.Mui-focusVisible - State class applied to the ButtonBase root element if the action area is keyboard focused.

Source code

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

CardActions API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
disableSpacing bool false No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

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

CSS

Rule name

Global class Rule name Description
- root Styles applied to the root element.
- spacing Styles applied to the root element unless disableSpacing={true}.

Source code

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

CardContent API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
component elementType - No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

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

CSS

Rule name

Global class Rule name Description
- root Styles applied to the root element.

Source code

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

CardHeader API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
action node - No
avatar node - No
classes object - No Override or extend the styles applied to the component.
component elementType - No
disableTypography bool false No
slotProps { action?: func | object, avatar?: func | object, content?: func | object, root?: func | object, subheader?: func | object, title?: func | object } {} No
slots { action?: elementType, avatar?: elementType, content?: elementType, root?: elementType, subheader?: elementType, title?: elementType } {} No
subheader node - No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
title node - No

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

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

Slots

Name Default Class Description
root 'div' .MuiCardHeader-root The component that renders the root slot.
avatar 'div' .MuiCardHeader-avatar The component that renders the avatar slot.
action 'div' .MuiCardHeader-action The component that renders the action slot.
content 'div' .MuiCardHeader-content The component that renders the content slot.
title Typography .MuiCardHeader-title The component that renders the title slot (as long as disableTypography is not true).
Follow this guide to learn more about the requirements for this component.
subheader Typography .MuiCardHeader-subheader The component that renders the subheader slot (as long as disableTypography is not true).
Follow this guide to learn more about the requirements for this component.

Source code

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

CardMedia API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
component elementType - No
image string - No
src string - No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

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

CSS

Rule name

Global class Rule name Description
- img Styles applied to the root element if component="picture or img".
- media Styles applied to the root element if component="video, audio, picture, iframe, or img".
- root Styles applied to the root element.

Source code

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

Collapse API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
addEndListener function(node: HTMLElement, done: Function) => void - No
children node - No
classes object - No Override or extend the styles applied to the component.
collapsedSize number | string '0px' No
component element type - No
disablePrefersReducedMotion bool false No
easing { enter?: string, exit?: string } | string - No
in bool - No
orientation 'horizontal' | 'vertical' 'vertical' No
slotProps { root?: func | object, wrapper?: func | object, wrapperInner?: func | object } {} No
slots { root?: elementType, wrapper?: elementType, wrapperInner?: elementType } {} No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
timeout 'auto' | number | { appear?: number, enter?: number, exit?: number } duration.standard No

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (Transition).

Inheritance

위에서 명시적으로 문서화되지 않았지만, Transition 컴포넌트의 props는 Collapse에서도 사용할 수 있어요. 일부 컴포넌트는 기본적으로 react-transition-group을 지원해요.

Theme default props

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

Slots

Name Default Class Description
root 'div' .MuiCollapse-root The component that renders the root.
wrapper 'div' .MuiCollapse-wrapper The component that renders the wrapper.
wrapperInner 'div' .MuiCollapse-wrapperInner The component that renders the inner wrapper.

CSS

Rule name

Global class Rule name Description
- entered Styles applied to the root element when the transition has entered.
- hidden Styles applied to the root element when the transition has exited and collapsedSize = 0px.
- horizontal State class applied to the root element if orientation="horizontal".

Source code

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

Paper API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

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

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
component elementType - No
elevation integer 1 No
square bool false No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
variant 'elevation' | 'outlined' | string 'elevation' No

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

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

CSS

Rule name

Global class Rule name Description
- elevation Styles applied to the root element if variant="elevation".
- elevation0 Styles applied to the root element if elevation={0}.
- elevation1 Styles applied to the root element if elevation={1}.
- elevation10 Styles applied to the root element if elevation={10}.
- elevation11 Styles applied to the root element if elevation={11}.
- elevation12 Styles applied to the root element if elevation={12}.
- elevation13 Styles applied to the root element if elevation={13}.
- elevation14 Styles applied to the root element if elevation={14}.
- elevation15 Styles applied to the root element if elevation={15}.
- elevation16 Styles applied to the root element if elevation={16}.
- elevation17 Styles applied to the root element if elevation={17}.
- elevation18 Styles applied to the root element if elevation={18}.
- elevation19 Styles applied to the root element if elevation={19}.
- elevation2 Styles applied to the root element if elevation={2}.
- elevation20 Styles applied to the root element if elevation={20}.
- elevation21 Styles applied to the root element if elevation={21}.
- elevation22 Styles applied to the root element if elevation={22}.
- elevation23 Styles applied to the root element if elevation={23}.
- elevation24 Styles applied to the root element if elevation={24}.
- elevation3 Styles applied to the root element if elevation={3}.
- elevation4 Styles applied to the root element if elevation={4}.
- elevation5 Styles applied to the root element if elevation={5}.
- elevation6 Styles applied to the root element if elevation={6}.
- elevation7 Styles applied to the root element if elevation={7}.
- elevation8 Styles applied to the root element if elevation={8}.
- elevation9 Styles applied to the root element if elevation={9}.
- outlined Styles applied to the root element if variant="outlined".
- root Styles applied to the root element.
- rounded Styles applied to the root element unless square={true}.

Source code

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

더 알아보기 (Learn more)