Box

Box (박스)

Material UI에서 가장 기본적인 컨테이너 컴포넌트인 Box를 알아볼게요. <div>처럼 범용적이면서도 테마와 sx prop을 활용할 수 있어서, 다른 컴포넌트를 묶는 빌딩 블록으로 자주 사용돼요.

출처: 문서

본문

Box 컴포넌트는 MUI System의 CSS 유틸리티에 접근할 수 있는 범용적이고 테마를 인식하는 컨테이너예요.

소개 (Introduction)

Box 컴포넌트는 다른 컴포넌트를 그룹화하기 위한 범용 컨테이너예요. Material UI를 다룰 때 근본적인 빌딩 블록입니다 — 앱의 테마와 sx prop에 접근할 수 있는 것 같은 추가 내장 기능이 있는 <div>라고 생각하면 돼요.

사용법 (Usage)

Box 컴포넌트는 Material UI에서 사용할 수 있는 다른 컨테이너와 달리, 그 사용 목적이 <div>처럼 다목적이고 개방적이에요. 반면 Container, Stack, Paper 같은 컴포넌트는 특정 사용 사례에 이상적인 용도 특화 prop을 갖고 있어요: Container는 메인 레이아웃 방향, Stack은 1차원 레이아웃, Paper는 입체(elevated) 표면용이에요.

기본 (Basics)

import Box from '@mui/material/Box';

Box 컴포넌트는 기본적으로 <div>로 렌더링되지만, component prop으로 다른 유효한 HTML 태그나 React 컴포넌트로 바꿀 수 있어요. 아래 데모는 <div>를 <section> 요소로 대체해요:

import Box from '@mui/material/Box';

export default function BoxBasic() {
  return (
    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
      This Box renders as an HTML section element.
    </Box>
  );
}

커스터마이즈 (Customization)

sx prop을 사용하면 MUI System 패키지에서 노출되는 모든 스타일 함수와 테마 인식 속성에 접근할 수 있는 CSS의 상위 집합(superset)을 사용해서 모든 Box 인스턴스를 빠르게 커스터마이즈할 수 있어요. 아래 데모는 이 prop을 사용해서 테마에서 색상을 적용하는 방법을 보여줘요:

import Box from '@mui/material/Box';
import { ThemeProvider } from '@mui/material/styles';

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0066CC',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}

구조 (Anatomy)

Box 컴포넌트는 단일 루트 <div> 요소로 구성돼요:

<div className="MuiBox-root">
  <!-- contents of the Box -->
</div>

Box API

Demos (데모)

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

• Box
• Menubar

Import (임포트)

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

Props

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

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

CSS

Rule name (규칙 이름)

Source code (소스 코드)

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

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

더 알아보기 (Learn more)

• sx prop — Box 스타일링의 핵심
• MUI System — Box가 사용하는 시스템 유틸리티