Container

Container (컨테이너)

컨테이너는 콘텐츠를 가로로 가운데 정렬해줘요. 가장 기본적인 레이아웃 요소예요.

컨테이너는 중첩될 수 있지만, 대부분의 레이아웃은 중첩된 컨테이너를 필요로 하지 않아요.

출처: 문서

본문

Fluid

플루이드(fluid) 컨테이너의 너비는 maxWidth prop 값에 의해 제한돼요.

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';

export default function SimpleContainer() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Container maxWidth="sm">
        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
      </Container>
    </React.Fragment>
  );
}

<Container maxWidth="sm">

Fixed

완전히 플루이드한 뷰포트를 수용하는 대신 고정된 크기 집합으로 설계하고 싶다면, fixed prop을 설정하면 돼요. 이때 max-width는 현재 브레이크포인트의 min-width와 일치해요.

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';

export default function FixedContainer() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Container fixed>
        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
      </Container>
    </React.Fragment>
  );
}

<Container fixed>

Container API (Container API)

Demos (데모)

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

Container

Import (불러오기)

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

Props (속성)

Name	Type	Default	Required	Description
classes	`object`	-	No	Override or extend the styles applied to the component.
component	`elementType`	-	No
disableGutters	`bool`	`false`	No
fixed	`bool`	`false`	No
maxWidth	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false \| string`	`'lg'`	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 (HTMLElement).

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

Theme default props (테마 기본 props)

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

CSS

Rule name (규칙 이름)

Global class	Rule name	Description
-	disableGutters	Styles applied to the root element if `disableGutters={true}`.
-	fixed	Styles applied to the root element if `fixed={true}`.
-	maxWidthLg	Styles applied to the root element if `maxWidth="lg"`.
-	maxWidthMd	Styles applied to the root element if `maxWidth="md"`.
-	maxWidthSm	Styles applied to the root element if `maxWidth="sm"`.
-	maxWidthXl	Styles applied to the root element if `maxWidth="xl"`.
-	maxWidthXs	Styles applied to the root element if `maxWidth="xs"`.
-	root	Styles applied to the root element.

Source code (소스 코드)

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

/packages/mui-material/src/Container/Container.js

PigmentContainer API (PigmentContainer API)