Box & Container - rkaku/webpack-crash-course GitHub Wiki

Fluid(可変) 固定

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';

export default function SimpleContainer() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Container maxWidth="sm">
        <Typography component="div" style={{ backgroundColor: '#cfe8fc', height: '100vh' }} />
      </Container>
    </React.Fragment>
  );
}

<Container maxWidth="sm">

<Container fixed>
  • Group Import name Prop CSS property Theme key
  • borders border border border borders
  • borders borderBottom borderBottom border-bottom borders
  • borders borderColor borderColor border-color palette
  • borders borderLeft borderLeft border-left borders
  • borders borderRadius borderRadius border-radius shape
  • borders borderRight borderRight border-right borders
  • borders borderTop borderTop border-top borders
  • shadows boxShadow boxShadow box-shadow shadows
  • display displayPrint displayPrint display none
  • display displayRaw display display none
  • flexbox alignContent alignContent align-content none
  • flexbox alignItems alignItems align-items none
  • flexbox alignSelf alignSelf align-self none
  • flexbox flex flex flex none
  • flexbox flexDirection flexDirection flex-direction none
  • flexbox flexGrow flexGrow flex-grow none
  • flexbox flexShrink flexShrink flex-shrink none
  • flexbox flexWrap flexWrap flex-wrap none
  • flexbox justifyContent justifyContent justify-content none
  • flexbox order order order none
  • palette bgcolor bgcolor backgroundColor palette
  • palette color color color palette
  • positions bottom bottom bottom none
  • positions left left left none
  • positions position position position none
  • positions right right right none
  • positions top top top none
  • positions zIndex zIndex z-index zIndex
  • sizing height height height none
  • sizing maxHeight maxHeight max-height none
  • sizing maxWidth maxWidth max-width none
  • sizing minHeight minHeight min-height none
  • sizing minWidth minWidth min-width none
  • sizing width width width none
  • spacing spacing m margin spacing
  • spacing spacing mb margin-bottom spacing
  • spacing spacing ml margin-left spacing
  • spacing spacing mr margin-right spacing
  • spacing spacing mt margin-top spacing
  • spacing spacing mx margin-left, margin-right spacing
  • spacing spacing my margin-top, margin-bottom spacing
  • spacing spacing p padding spacing
  • spacing spacing pb padding-bottom spacing
  • spacing spacing pl padding-left spacing
  • spacing spacing pr padding-right spacing
  • spacing spacing pt padding-top spacing
  • spacing spacing px padding-left, padding-right spacing
  • spacing spacing py padding-top, padding-bottom spacing
  • typography fontFamily fontFamily font-family typography
  • typography fontSize fontSize font-size typography
  • typography fontWeight fontWeight font-weight typography
  • typography textAlign textAlign text-align none
<Box component="span" m={1}>
  <Button />
</Box>
<Box color="text.primary" clone>
  <Button />
</Box>
<Box color="text.primary">
  {props => <Button {...props} />}
</Box>
  • import Box from '@material-ui/core/Box';
  • Name Type Default Description
  • children * union: node | func ボックスレンダー関数またはノード。
  • clone bool false trueの場合、ボックスはその子DOM要素をリサイクルします。 内部的にはReact.cloneElementです。
  • component union: string | func | object 'div' ルートノードに使用されるコンポーネント。 DOM要素またはコンポーネントを使用する文字列。
⚠️ **GitHub.com Fallback** ⚠️