MUI Box 컴포넌트의 용도는 무엇입니까?

MUI Box 컴포넌트의 용도는 무엇입니까?

아무리 노력해도 여기에 나와 있는 설명을 이해할 수 없다.

Box 컴포넌트는 대부분의 CSS 유틸리티 요구에 대한 래퍼 컴포넌트로 기능합니다.

CSS 유틸리티의 요구는 무엇입니까?

이 컴포넌트의 사용 예는 무엇입니까?어떤 문제가 해결됩니까?당신은 이것을 어떻게 사용하세요?

MUI 문서는 매우 제한적이고 이해하기 어렵습니다.구글을 검색해 봤지만, 일반적으로는 소재 UI 사용 방법에 대한 꽤 가벼운 블로그 게시물만 발견됩니다.이 컴포넌트를 이해하는 데 도움이 될 뿐만 아니라, 좋은 자원도 있으면 고맙게 생각합니다.

(배경에서는 일반적으로 React, JS, CSS, HTML 등을 이해하고 있습니다만, 후자의 경우는 강도가 낮습니다).

MUI v4를 사용합니다.에서 MUI v5를 CSS 할 수 .sx prop prop prop just prop prop prop뿐만 ,,,Box;;;;;;;;;;;;;;;;;;Box할 수 .sx.

에서는 '아까보다'를 잘 되지 않습니다.Box.

Box 표현하다<div>개별 CSS 파일, CSS-in-J, 인라인 스타일 등의 대체 방법은 입력과 사용이 번거로울 수 있으므로 편의상 React 소품을 통해 CSS 스타일을 직접 적용할 수 있습니다.

예를 들어 JSS를 사용하는 다음 컴포넌트에 대해 생각해 보겠습니다.

import * as React from 'react'

import { makeStyles } from '@material-ui/styles'

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: theme.spacing(1),
  }
}))

const Example = ({children, ...props}) => {
  const classes = useStyles(props);

  return (
    <div className={classes.root}>
      {children}
    </div>
  )
}

Box원하는 소품을 전달하면 됩니다.

import * as React from 'react'

import Box from '@material-ui/core/Box'

const Example = ({children}) => (
  <Box display="flex" flexDirection="column" alignItems="stretch" padding={1}>
    {children}
  </Box>
)

해야 하는지 주의해 .padding={1}theme.spacing(1)Box재료 UI를 사용합니다.

큰 파일에서는 렌더링된 요소에서 스타일로 이동하는 것이 요소에 바로 있는 경우보다 더 번거로울 수 있습니다.

사용하고 싶지 않은 경우Box: (MUI v4) :

• 수 하기 .classes )makeStyles이네이블입니다. <Example classNames={{ root: 'alert' }} />에서는 동작합니다.makeStyles를 들어, 「」가 .Box②)
• 하지 않은예: JSS " " " " " " " " " " " " " " " " " " " " " ( " : JSS " " " ) :$root > li > a,$root .third-party-class-name)

A Box으로는 '이행'입니다.div* 테 * * * * 。 Box, 의 「」div인라인 스타일처럼 매우 빠르게 사용할 수 있습니다(단, 인라인 스타일은 아닙니다).MUI를 사용하다

<Box
  sx={{
    bgcolor: 'primary.main',
    color: 'text.secondary',
    border: 4,
    borderRadius: 2,
    px: 2,
    fontWeight: 'fontWeightBold',
    zIndex: 'tooltip',
    boxShadow: 8,
  }}
>
  Box
</Box>

할 필요가 있는 는,div 해서 '이렇게 하다'를 돼요themeuseTheme모든 곳에서 악용될 경우 권장되지 않는 인라인 스타일을 후크하여 작성합니다.

<div
  style={{
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.text.secondary,
    border: '4px solid black',
    borderRadius: theme.shape.borderRadius * 2,
    padding: `0 ${theme.spacing(2)}`,
    fontWeight: theme.typography.fontWeightBold,
    zIndex: theme.zIndex.tooltip,
    boxShadow: theme.shadows[8],
  }}
>
  div
</div>

Box같른른른른 among among among among among among among among among among among Typography ★★★★★★★★★★★★★★★★★」Stack에서는 스타일 값을 최상위 소품으로 전달할 수 있는 시스템 속성도 지원되므로 코드는 더욱 짧아집니다.내부적으로 시스템 속성이 수집되어 에 병합됩니다.sx같은 것을 제안합니다(자세한 내용은 이 답변을 참조하십시오).

<Box
  bgcolor="primary.main"
  color="text.secondary"
  border={4}
  borderRadius={2}
  px={2}
  fontWeight="fontWeightBold"
  zIndex="tooltip"
  boxShadow={8}
>
  Box
</Box>

★★★★★★★★★★★★★★★★★★Boxsx '소품'도 할 수 .sx다음과 같은 기능을 제공합니다.

<Box
  display={{
    xs: 'none',
    sm: 'block',
  }}
  width={{
    sm: 30,
    md: 50,
    lg: 100,
  }}
>

또는 중첩 스타일 작성:

<Box
  display='flex'
  sx={{
    '& > :not(:last-child)': {
      mr: 2 // maginRight: theme.spacing(2)
    },
    ':hover': {
      bgcolor: 'green'
    }
  }}
>

「 」를 Box

• 「」을 하는 .div신속하게 제작할 수 있습니다.
• 다른 곳에서는 실제로 재사용할 수 없는 일회성 인라인 스타일을 작성하는 경우.이것은 레이아웃의 특정 부분에서 약간 잘못된 부분을 수정하려는 경우에 편리합니다.
• 이 한되어 있기 때문에 동적 또는 때, 코드와 코드와 함께 사용할 수 있다는 도 함께 사용할 수 있습니다.sx이치노
• 가 있기 때문에 여러 MUI 테마 sx속성은 주제 인식 즉시 사용할 수 있습니다.

사용하지 않을 때Box

• 그냥 보통을 .div
• 목록 항목, 그리드 항목 또는 테이블 셀과 같은 재사용 가능한 구성 요소에서 사용할 경우.그 이유는sxprop의 퍼포먼스가 가장 느리다(두 번째로 느린 접근법보다 2배 느림)
• MUI를 사용하다 MUI가 있습니다.sx하여 지원하도록 하겠습니다.Box다른 MUI 컴포넌트를 스타일링하는 경우에는 래퍼 또는 루트 컴포넌트가 필요하지 않습니다.

^{* : " " " "Box는 입니다.div루트 컴포넌트는 덮어쓸 수 있습니다.를 들면, '먹다'와 같이요.<Box component='span'>}

A Box이 없고 비주얼 .컨텐츠에 둘러싸인 요소이며, 그 자체에는 스타일링 규칙이 없고 시각적 출력에 대한 기본 영향도 없습니다.하지만 이곳은 필요에 따라 스타일링 규칙을 두는 장소입니다.이것은 실제 기능을 제공하는 것이 아니라 계층적 마크업 구조의 스타일을 제어하는 자리 표시자일 뿐입니다.

으로는 「이행」이 됩니다.<div>.

저는 종종 JSX의 빈 요소와 의미론적으로 비슷하다고 생각합니다.

<>
  Some elements here
</>

물건을 묶는 데 사용된다는 점에서.하지만 결과적으로<div>UI를 사용합니다.

<Box className={classes.someStyling}>
  Some elements here
</Box>

머티리얼 UI의 박스 컴포넌트에는 유용한 것이 많이 있습니다.

가장 중요한 것은 박스 요소가 기본적으로 material-ui/system 기능과 함께 내장되어 있다는 것입니다. 즉, 박스 요소를 래퍼로 사용하면 시스템 기능을 필요한 부분에 적용할 수 있습니다.

다음 예시와 같습니다.

<Box bgcolor="primary.main" color="primary.contrastText" p={2}>
  primary.main
</Box>

물론 css 클래스를 원하는 대로 추가할 수 있습니다.

또 다른 유용한 것은 다른 컴포넌트에서 왜곡되어 시스템 기능을 적용하는 데 매우 도움이 될 수 있습니다.

다음 예시와 같습니다.

<Typography component="div" variant="body1">
  <Box color="primary.main">primary.main</Box>
</Typography>

위의 예시는 모두 매뉴얼에서 인용한 것입니다.다음 링크에서 찾을 수 있습니다.

material ui 시스템 기능의 의미를 알 수 있습니다.여기서

주의: 여기서는 문서와 같은 컴포넌트에 임의의 머티리얼 UI 시스템 기능을 추가할 수 있지만, 필요한 것을 박스 컴포넌트로 조작하는 것이 훨씬 편리합니다.

언급URL : https://stackoverflow.com/questions/60451957/what-is-the-mui-box-component-for