Material-ui: [グリッド]コンテナとスクロールバーの余分な幅

flexboxgridで同じ問題が見つかりました。 間隔を実装するのは、ネガティブマージンソリューションの制限だと思います。
ブートストラップが何をしているのかを確認しましたが、この間隔機能がないため、問題はありません。

したがって、3つの回避策があります。

• 間隔機能を使用せず、ユーザーランドspacing={0}に実装すると、これをデフォルトの動作にすることができます。
• 少なくとも間隔の値を使用して親にパディングを追加する： https ：

    <div style={{ padding: 20 }}>
      <Grid container spacing={40}>

• 親にoverflow-x: hidden;を追加します。

より良い代替案が思いつかないので、締めくくります。 誰かがスペーシング機能のより良い解決策を持っているなら、あなたの声を上げてください:)。

私には、 spacing={0}がデフォルトの動作であるように思われます。 少なくとも、より良い解決策が現れるまでは、material-uiの初めてのユーザーには<Grid />バグのように見えるからです。

@hboylanこの制限のために開かれているこれらすべての問題に照らして、私は疑問に思い始めています！ API使用状況分析にアクセスできたらいいのにと思います📈。

waiting for users upvotesタグを追加しました。 人々がspacing={0}を好むかどうかはわかりません。 ですから、もしそうなら、この問題に賛成してください。 賛成票の数に基づいて、取り組みを優先します。

少なくとも8つの重複した問題は強いシグナルです。 この制限についてのメモをドキュメントに追加します。

疑問に思っていること：あなたが説明したますか？

そうでない場合は、デフォルトでこれをGrid-container-Componentに追加できますか？

更新：
=>ばかげた私;）もちろん：私たちはスペースを失っています、ごめんなさい。

コンテナでspacing={0}を使用して、 material-ui @ nextでこれを修正することはできません。または、overflowing-xなどを含む他の2つのソリューションのいずれかを使用します。 多分私は何かが欠けていますか？

flexboxgrid（ @oliviertassinariが同じ問題を抱えていると述べた）には、それを修正したと主張するフォークがあります。 https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572コードを掘り下げていませんが、グリッドで使用できるものがあるかどうかを調べる価値があるかもしれません。

こんにちは、

最近、このライブラリをプロジェクトの1つに採用し始めました。

このスレッドを見つけたときの驚きを想像してみてください。

基本的に、これは最新のマテリアルである次のバージョンの時点で回避策なしでクローズされたバグです。 これは心配です。
さらに心配なのは、このバグを修正する代わりに、「制限」について説明するテキストがドキュメントに追加されたという考えです。

バグやバグ修正に関する手順はありますか？ それとも、すべてがその場で決定されますか？

これは1.0.0-プレリリースです：
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-プレリリース

このスレッドから外挿すると、1.0.0-プレリリースには実際にそこにあるものよりもはるかに多くのバグがあると仮定しますか？ （つまり、この問題など）

これまでにgithubで有効なmaterial-uiバグをいくつクローズしましたか？修正する代わりに、ドキュメントにテキストを追加しましたか？

そうでなければ、フレームワークは素晴らしいです。 少し心配なのは手順です。

ありがとう、そして私が誰かを怒らせた、そして/または私が少し強くなったならば、私は謝罪します。

@kmlx

1.0.0-プレリリースベータには、実際にそこにあるものよりも多くのバグがあると想定しますか？

確かにそうすべきです（「問題」を参照）。 また、1.0.0-rc.xにもバグがあると予想する必要がありますが、APIはほとんど安定しています。

@ryanflorenceのツイートのタイミングは完璧です。

誰かを怒らせたり、少し強くなった場合は、お詫び申し上げます。

少し強いことに遭遇していることがわかっている場合は、謝罪しないでください。 何を言いたいのか、どのように言いたいのかを考え直してください。 （そして、おそらく、オープンソースから得た価値と貢献した金額を比較して、苦情が重要かどうかを判断してください。）

さらに良いことに、ドキュメントで提供されている回避策では不十分な場合は、CSSに固執して、気になる制限を解決できるかどうかを確認してください。

@mbrookes

返信に時間を割いていただきありがとうございます。

あなたは確かにすべきです（問題を参照）。 また、1.0.0-rc.xにもバグがあると予想する必要がありますが、APIはほとんど安定しています。

APIがほぼ安定していると聞いてうれしいです。 他のプロジェクトと同じように、さまざまな未発見の問題があると思います。

それでも、現時点ではこの問題の回避策は機能しておらず、問題自体はクローズされています。
以前のメッセージによると、このflexboxgridフォークが解決策を提供する可能性があります。
8月1日から始まるコミットは、修正を探す必要があるコミットであると想定します。

文書化された回避策が機能しなくなった場合（現在モバイルを使用しているため、テストできません）、この問題を再度開く必要があります。

修正を検討していただきありがとうございます。

ところで問題は発生していません。私の解決策は、コード内の各<Grid container />または<Grid item container />コンポーネントでspacing={0}を手動で実行すること

@ kmlxbeta.22で提案された回避策のテストに成功しました。 恒久的な解決策を見つけた場合は、遠慮なく報告してください。

spacing={0}を追加しましたが、実際には間隔が必要だったので、パディングを追加し、2つの列が表示されている中程度のブレークポイントの上にのみパディングを追加しました。

const styles = theme => ({
  dividerRight: {
    [theme.breakpoints.up('md')]: {
      paddingRight: theme.spacing.unit * 0.5
    }
  },
  dividerLeft: {
    [theme.breakpoints.up('md')]: {
      paddingLeft: theme.spacing.unit * 0.5
    }
  },
});

次に、左側の列にclassName={classes.dividerRight}を追加し（仕切りが右側にあるため）、右側の列にclassName={classes.dividerLeft}を追加しました。

ちょうどこの問題がありました。 次のcssをグリッドのコンテナに追加して解決しました。見栄えが良いです。

.grid-container {
  width: 100% !important;
  margin: 0 !important;
}

@martjoao私にとって、これはグリッドコンテナの外側の周りに不要なパディングをもたらしました（内側にはエッジと同じ高さの要素があります）。

これに対する私の迅速で汚い解決策は、body要素にoverflow-x: hidden;をスローすること

編集：

オーバーフローアプローチが上で述べられているのを見たばかりです。 私の悪い。

<Grid>使用目的は、アプリケーション/プライマリレイアウト（アプリバー、サイドバー、コンテンツ領域など）ではないことに注意してください。 これは、実際にはグリッド内のコンテンツ要素（プロファイルのリストなど）を配布することを目的としています。 そのことを念頭に置いて、コンテンツ領域が影響を受けないように要素の間隔を空けて（たとえば、背景色や境界線を追加できるようにする）、意味があります。

ただし、ドキュメントでは、 <Grid>使用法を説明する「レイアウト」という名前のセクション全体を使用して、 <Grid>要素をプライマリレイアウトに使用する必要があることを示しています。

多くの人がこの直感に反すると感じるもう1つの理由は、他のすべてのUIフレームワークがプライマリレイアウト（80％の場合と見なされる@oliviertassinari）を実行するメカニズムを提供し、コンテンツアイテムのグリッドをレイアウトすることが二次的な懸念事項であるためです。

しかし、ドキュメントは、要素は、「レイアウト」という名前のセクション全体で次の使用法を説明することにより、プライマリレイアウトに使用する必要があります。。

@wmaddenレイアウトの表現を使用すると、アプリ/プライマリレイアウトに関するものだと思われるのはなぜですか？

多くの人がこれを直感に反すると感じるもう1つの理由

直感に反するものは何ですか？

これは80％のケースと見なされます

私は同意します、私たちは持っています：そのための＃10986。

@wmaddenレイアウトの表現を使用すると、アプリ/プライマリレイアウトに関するものだと思われるのはなぜですか？

これは、単なるコンポーネントデモではなく、「レイアウト」と呼ばれるトップレベルのセクションにあります。 そして、このような言い回し：

グリッドは、レイアウト間の視覚的な一貫性を作成すると同時に、さまざまなデザインにわたる柔軟性を可能にします。 マテリアルデザインのレスポンシブUIは、12列のグリッドレイアウトに基づいています。

アプリケーションのレイアウトに使用するのが適切であると思いました。負のマージン制限がすぐに問題になります。

多くの人がこれを直感に反すると感じるもう1つの理由

UIフレームワークは通常、その目的のためのレイアウトソリューションを提供し、通常は「レイアウト」と呼ばれるトップレベルのドキュメントトピックにあるため、グリッドコンポーネントをプライマリレイアウトに使用しないことは直感に反することを意味します。

Reactでは、子供は親に封じ込められるというのが一般的な仮定です。 <Grid>の負のマージンは、親の境界を超えて拡張することでその仮定を破ります。これにより、設計によるものであることに気付いていない人にとっては、その動作がバグのように見えます。

@ vedant1811負のマージンはデフォルトの動作ではなくなりました。 アプリケーションレベルのレイアウトでは、グリッドなしでグリッドを使用できるはずです。

@oliviertassinariこれを変更したアップデートはありましたか？ パッケージのバージョンを更新する必要があるかどうか疑問に思っています。 以前は、親要素の回避策でoverflow: hidden;ました。

@saricdenはい、 spacingプロパティを提供しないことで、そこにあるほとんどのグリッドライブラリにはこの機能がなく、マージンを処理できるようになっています。

私はちょうどこれに遭遇しました。 別のハッキーのように見えますが、問題のない回避策は、グリッドコンテナに幅 'calc（100％-16px）'を配置することです...少なくとも画面サイズが小さい私の状況では。

ブレークポイントごとに幅を変えてみると、これは改善される可能性がありますが、画面のコンテナが広くなると、問題はそれほど目立たなくなります。

それでも同じ問題がありますが、xs = {12}を追加することで修正されています。
<Grid container spacing={3} xs={12}>

この問題は引き続き発生します。 spacing={...}を追加すると、水平スクロールが発生します。 xs={12}追加しても解決しません。

_その価値について：_
Material-UI4.5.0でこの問題が発生しています。 どういうわけか、私はちょうど今これに気づいていて、1年以上Material-UIを使用しています。

マージンスタイルに加えて上記のxs={12}提案を試しましたが（右側に余分なマージンが表示されていたため）、次のように視覚的に目的の効果が得られます。

const useStyles = makeStyles(theme => ({
  grid: { margin: theme.spacing(0) }
}));
...
<Grid container spacing={2} xs={12} className={classes.grid}>

_しかし..._コンソールに警告が表示されます：

警告：失敗したプロップタイプ：小道具xsのGrid上で使用する必要がありますitem 。

そのため、コンテナでxs={12}を使用する代わりに、追加するスタイルをmakeStyles()にコピーしました。 これまでのところ、次のことが私のためにトリックを行っているようです。

const useStyles = makeStyles(theme => ({
  grid: {
    margin: theme.spacing(0),
    flexGrow: 0,
    maxWidth: `100%`,
    flexBasis: `100%`
  }
}));
...
<Grid container spacing={2} className={classes.grid}>

これを機能させたのはmaxWidth： 100%だけです。 ただし、幅は最大に引き伸ばされます。 特定のmaxWidth値を設定した場合、これは機能しません。

グリッドコンテナのマージンをゼロに設定するために、スタイル付きコンポーネントを使用してこれを修正しました。

スタイル付きグリッドコンテナ：

const GridContainer = styled(Grid)`
  margin: 0;
`;

これで、余分な幅を生成していたGridコンポーネントの代わりに、GridContainerが使用されます。

      <GridContainer
        container
        direction="column"
        justify="center"
        alignItems="center"
        xs={12}
        spacing={2}
      >

私は使用しました100％の幅と高さのラッパー内のコンポーネントですが、コンテナーがページを100vwを超えて引き伸ばし、水平方向のオーバーフローを引き起こすというこの問題に遭遇しました。 なぜこれに負のマージンが使用されるのかわかりませんか？ ページを境界に戻すには、デフォルトのスタイルをオーバーライドする必要がありました。

const NormalizedGridContainer = withStyles(theme => ({
  root: {
    width: '100%',
    margin: '0px',
    padding: `${(spacing/2) * 8}px`
  }
}))(Grid);

IMOグリッドコンテナがアプリケーションのラッパーとして使用されることを意図していないことをもう少し明確にする必要があります。

デスクトップサイズでは、画像が横に伸びていて、xs = {12}で修正すると奇妙なことにパディングが表示されます。 私の場合、修正は@martjoaoのソリューションのように見えますが、モバイル幅のみです。
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

私は同様の問題に遭遇し、次の方法で修正しました。

body { margin: 0; padding: 0; }

以下を行うことになった：

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

これで問題は解決します。

その問題にも直面していて、これをmaterial-uiで修正するのが理にかなっているのかどうか疑問に思っていた、関連する問題の量を調べていました。

基本的にここと同じことはできませんでした： https ：

同じ問題に遭遇し、実行することによって半修正を見つけました

<Container maxWidth={false}>
  <Grid container spacing={3}>
    <Grid item />
  </Grid>
</Container>

それでも同じ問題がありますが、xs = {12}を追加することで修正されています。
<Grid container spacing={3} xs={12}>

これは私のためにそれを修正しました...ありがとう！

それでも同じ問題がありますが、xs = {12}を追加することで修正されています。
<Grid container spacing={3} xs={12}>

これは私のためにそれを修正しました...ありがとう！

素晴らしい解決策！ これで私たちも修正されました。 コンテナ+ xsの警告を防ぐために、 container itemを追加する必要がありました。

overflow-x: hidden追加した後に問題が解決しました; 親では、コンテナ内のようにmui-datatableがあるため、コンテナにoverflowX: 'hidden'を追加しました

以下を行うことになった：

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

これで問題は解決します。

おかげで、これは私にとって唯一の実用的な解決策でした。

margin 0 !importantを省略するために私のために働くように_

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        // margin: "0 !important"
      }
    },
  }
});

このUIフレームワークには非常に多くのバグがあるので困惑します。 君の

@SomnathKadam

overflow-x: hidden追加した後に問題が解決しました; 親では、コンテナ内のようにmui-datatableがあるため、コンテナにoverflowX: 'hidden'を追加しました

これの問題は、まだスクロールできることです。 オーバーフロー-x：非表示は良い解決策ではありません

MuiGrid：{
コンテナ：{
幅： "100％！重要"、
マージン：「0！重要」
}
}、
@ rag4214
これはフレームワーク全体の構造を強制的に変更するため、お勧めできません。 ある場所で修正したり、別の場所で壊したりする場合があります。

@ manualva7 https://material-ui.com/components/grid/#negative -margin

私はショックを受けました。MUIを2年ほど使用していて、これまで見たことがありません。 なぜそれが起こったのかまだ解明されていません。

以下を行うことになった：

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

これで問題は解決します。

この解決策は私のために働きます。

これは長い間続いており、修正がすぐに不可能な場合はドキュメントの一部にする必要があります。

まだ修正はありますか？
私はこの問題を抱えており、 overflow-x: hiddenを使用することを考えています、あなたはどう思いますか？

問題はまだあります。 ソリューションoverflow-x：親の非表示プロパティ

これのためのちょうど別のハック、それは私のために働きます;）

const useStyles = makeStyles((theme) => ({
 root: {
    '& .MuiGrid-root': {
      width: 'calc(100% - 2px)',
    },
  },
// [...]

それらの2pxは私のグリッド定義の下のどこかに追加されているようですので、実際の値は他の人とは異なる可能性があります...