[解決済み] MUI Boxは何のためのコンポーネントですか？

質問事項

このような説明をされてもピンと来ません。 こちら .

Boxコンポーネントは、CSSユーティリティに必要なほとんどのもののラッパー・コンポーネントとして機能する。

CSSユーティリティに必要な「もの」とは何でしょうか？

このコンポーネントはどのような用途に使われるのでしょうか？どのような問題を解決するのでしょうか？どのように使用するのですか？

MUIのドキュメントが非常に限られていて、理解しにくいと感じています。ググってみましたが、一般的に、マテリアルUIの使用方法に関するかなり軽いブログ記事しか見つかりませんでした。このコンポーネントを理解する手助けに加えて、何か良いリソース（もしそのようなものがあれば、彼ら自身のドキュメントのより良いバージョンのようなもの）があれば、本当に感謝します。

(背景としては、React、JS、CSS、HTMLなどは概ね理解しており、後者2つはあまり強くない）。

どのように解決するのか？

EDIT: これはMUI v4時代に書かれたものです。 MUI v5では、すべてのMUIコンポーネントで、CSSスタイルを sx プロップだけでなく Box しかし Box は、トップレベルのスタイリングプロップスも受け入れ、さらに sx .

他の回答では、なぜ Box .

Box をレンダリングします。 <div> を使用すると、別のCSSファイル、CSS-in-JS、またはインラインスタイルのような代替手段がより入力と手間がかかることがあるので、利便性のために、React propsを介して直接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 では、このようにMaterial-UIテーマで作業するための様々な便利な機能を提供しています。

大きなファイルでは、レンダリングされた要素とスタイルを行き来するのは、スタイルが要素上にある場合よりも面倒な場合があります。

を使用する場合 しない を使用したい。 Box (MUI v4)。

• を渡すことでスタイルをオーバーライドできるようにしたい。 classes ( makeStyles はこれを可能にします。 <Example classNames={{ root: 'alert' }} /> で動作することになります。 makeStyles の例では Box の例です)。
• 自明でないセレクタを使用する必要がある（JSSセレクタの例。 $root > li > a , $root .third-party-class-name )