Shape

Shape (모양)

Shape는 컴포넌트의 테두리 반경(border radius)을 제어하는 데 도움을 주는 디자인 토큰이에요. Material UI에서 모양을 어떻게 커스터마이즈하는지 함께 살펴볼게요.

출처: 문서

본문

Shape는 컴포넌트의 테두리 반경을 제어하는 데 도움을 주는 디자인 토큰이에요.

shape는 단일 속성인 borderRadius를 포함하며, 기본값은 4px예요. 여러 컴포넌트가 이 값을 사용해서 라이브러리 전체에 일관된 테두리 반경을 적용해요.

커스텀 Shape (Custom shape)

커스텀 모양을 추가하려면 shape 키와 함께 테마를 만들어요:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  shape: {
    borderRadius: 8,
    borderRadiusSm: 4, // new property
    borderRadiusMd: 8, // new property
    borderRadiusLg: 16, // new property
    borderRadiusXl: 24, // new property
  },
});

TypeScript

TypeScript를 사용한다면 module augmentation을 이용해 새로운 shape 속성을 테마에 확장해야 해요.

declare module '@mui/material/styles' {
  interface Shape {
    borderRadiusSm: number;
    borderRadiusMd: number;
    borderRadiusLg: number;
    borderRadiusXl: number;
  }

  interface ShapeOptions {
    borderRadiusSm?: number;
    borderRadiusMd?: number;
    borderRadiusLg?: number;
    borderRadiusXl?: number;
  }
}

더 알아보기 (Learn more)