[解決済み】ReactJS: マテリアルuiのブレークポイントについて

質問

とはどのような違いがあるのでしょうか。 breakpoints.up , breakpoints.down , breakpoints.between と breakpoints.value ? また、このコードの意味は、ブレークポイントの値がここでどのように動作しているのか？これは theme.spacing.unit*2*2 = theme.spacing.unit*4 それとも何か別の意味があるのでしょうか？

[theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
  width: 600,
  marginLeft: 'auto',
  marginRight: 'auto',
},

解決方法は？

マテリアルでは、以下のブレークポイント群を使用します。をカスタマイズすることができます。 値 というブレイクポイントがあります。

ブレークポイントに関する文書

ブレイクポイントとは、特定のレイアウト要件を持つ、あらかじめ決められた画面サイズの範囲のことです。

• xs (特小)：0px以上
• sm (小)：600px以上
• md (中)：960px以上
• lg (大)：1280px以上
• xl (特大)：1920px以上

ご質問のあった機能( up , down , between ) は、テーマで定義されたブレイクポイントを使用してメディアクエリを作成するためのヘルパーです。

注 breakpoints.up() と breakpoints.down() は数値も受け付けますが、これはピクセルに変換されます。これは他のメソッドには当てはまりません。

ブレークポイント.up(ブレークポイント|数値)

を作成します。 最小幅 指定されたブレイクポイント以上の画面サイズを対象とするメディアクエリです。

// Styles will be applies to screen sizes from "sm" and up
[theme.breakpoints.up('sm')]: {
  // styles
}

breakpoints.down(ブレークポイント|番号)

ブレークポイント名を受け取り 最大幅 までのスクリーンサイズを対象としたメディアクエリです。 を含む 指定されたブレークポイント

これは包括的なものなので、最大幅は次のブレイクポイントの値になります。

// Styles will be applies to screen sizes from 0 up to and including "md"
[theme.breakpoints.down('md')]: {
  // styles
}

breakpoints.between(start, end)

2つのブレークポイント名を受け取り、最初のブレークポイントから次のブレークポイントまでの画面サイズを対象とするメディアクエリを作成します。 を含む 2番目のブレークポイント

// Styles will be applies to screen sizes from "sm" up to
// and including "lg"
[theme.breakpoints.between('sm', 'lg')]: {
  // styles
}

ブレークポイント.値

テーマで定義されたブレークポイントの値を含むオブジェクト

{xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920}

breakpoints.width(ブレークポイント)

この関数は、特定のブレイクポイントの値を取得するために使用されます。

theme.breakpoints.width('sm')  // => 600