[解決済み] 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
)
関連
-
[解決済み】React - 式は1つの親要素を持つ必要がありますか?
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み] Reactのstateとpropsの違いとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] useStateプロパティのフックにmap関数を使用する方法
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?
-
[解決済み] ESLintとTSLintの違い【クローズド】について