Material-ui: [그리드] 컨테이너 및 스크롤바의 추가 너비

flexboxgrid 에서
나는 부트 스트랩이 무엇을하는지 확인했는데,이 간격 기능이 없기 때문에 문제가 없습니다.

따라서 세 가지 사용 가능한 해결 방법이 있습니다.

• 간격 기능을 사용하지 않고 spacing={0} 사용자 영역에서 구현하면이를 기본 동작으로 만들 수 있습니다.
• 최소한 공백 값으로 부모에 패딩 추가 : https://codesandbox.io/s/WnpKlQ32n

    <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} 또는 overflowing-x 등을 포함한 다른 두 가지 솔루션을 사용하여 material-ui @ next 에서이 문제를 해결할 수 없습니다. 내가 뭔가 빠졌나?

flexboxgrid ( @oliviertassinari 가 동일한 문제가 했음 )에는 문제를 해결했다고 주장하는 포크가 있습니다. https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572 저는 코드를 파지 않았지만 Grid에서 사용할 수있는 것이 있는지 조사해 볼 가치가 있습니다.

안녕하세요,

우리는 최근 프로젝트 중 하나에이 라이브러리를 채택하기 시작했습니다.

이 스레드를 발견했을 때 우리의 놀라움을 상상할 수 있습니다.

기본적으로 이것은 최신 material-next 버전에서 해결 방법없이 종료 된 버그입니다. 이것은 걱정입니다.
더욱 걱정스러운 것은이 버그를 수정하는 대신 "제한"에 대해 문서에 추가 된 텍스트가 있다는 것입니다.

버그 및 버그 수정에 관한 절차가 있습니까? 아니면 모든 것이 그 자리에서 결정됩니까?

1.0.0 프리 릴리즈입니다.
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

이 스레드에서 외삽하면 1.0.0- 프리 릴리즈에 실제로 우리가 보는 것보다 더 많은 버그가 있다고 가정할까요? (예를 들어이 문제)

지금까지 github에서 몇 개의 유효한 material-ui 버그를 닫았으며 문서에 텍스트를 추가하는 대신 수정하지 않았습니까?

그렇지 않으면 프레임 워크가 훌륭합니다. 조금 걱정되는 것은 절차입니다.

감사합니다. 내가 누군가를 화나게했는지 그리고 / 또는 내가 조금 강해지면 사과드립니다.

@kmlx

1.0.0- 프리 릴리즈 베타에는 실제로 우리가 보는 것보다 더 많은 버그가 있다고 가정할까요?

확실히해야합니다 (참조 : 문제 ). 그리고 1.0.0-rc.x에도 버그가있을 것으로 예상해야하지만 API는 대부분 안정적입니다.

@ryanflorence 의 트윗 타이밍이 완벽합니다.

내가 누군가에게 불쾌감을 주었거나 조금 강해지면 사과합니다.

당신이 조금 강한 것을 알고 있다면 사과하지 마십시오. 무엇을 말하고 싶은지, 어떻게 말하고 싶은지 다시 생각해보세요. (그리고 아마도 오픈 소스에서 얼마나 많은 가치를 얻었는지와 얼마나 기여했는지를 살펴보고 불만이 어떤 비중을 차지하는지 결정하십시오.)

더 나은 방법은 문서에 제공된 해결 방법이 충분하지 않은 경우 CSS에 갇혀 문제를 일으키는 제한을 해결할 수 있는지 확인하는 것입니다.

뿡뿡

시간을내어 답장 해 주셔서 감사합니다.

확실히해야합니다 (문제 참조). 그리고 1.0.0-rc.x에도 버그가있을 것으로 예상해야하지만 API는 대부분 안정적입니다.

API가 대부분 안정적이라는 소식을 듣고 기쁩니다. 어떤 프로젝트 든, 나는 다양한 미 발견 문제가있을 것이라고 가정합니다.

그러나 현재이 문제에 대한 해결 방법이 작동하지 않고 문제 자체가 종결되었습니다.
이전 메시지에 따라이 flexboxgrid 포크 가 솔루션을 제공 할 수 있습니다.
나는 8 월 1 일부터 시작되는 커밋이 수정 사항을 찾아야하는 커밋이라고 가정하겠습니다.

문서화 된 해결 방법이 더 이상 작동하지 않는 경우 (현재 모바일 상태이므로 테스트 할 수 없음)이 문제를 다시 열어야합니다.

수정 사항을 찾아 주셔서 감사합니다.

문제 btw가 없으며 내 솔루션은 내 코드의 각 <Grid container /> 또는 <Grid item container /> 구성 요소에서 spacing={0} 를 수동으로 수행하는 것이 었습니다.

@kmlx beta.22로 제안 된 해결 방법을 성공적으로 테스트했습니다. 영구적 인 해결책을 찾으면 언제든지보고하십시오.

spacing={0} 했지만 실제로는 간격을 원했기 때문에 패딩을 추가하고 두 개의 열이 표시된 중간 중단 점 위에 패딩 만 추가하도록했습니다.

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; 를 던지는 것입니다. 그러나 특정 브라우저 (특히 모바일 브라우저)에서 스크롤하면 가로 스크롤 막대가 1 초 동안 깜박여 사용자에게 오른쪽으로 스크롤 할 수 있음을 나타냅니다. 이것은 여전히 ​​나에게 바람직하지 않습니다.

편집하다:

위에서 언급 한 오버플로 접근 방식을 보았습니다. 내 잘못이야.

<Grid> 의 의도 된 용도가 _not_ 애플리케이션 / 기본 레이아웃 (예 : 앱 바, 사이드 바, 콘텐츠 영역 등)이라는 점에 주목할 가치가 있다고 생각합니다. 실제로 그리드 (예 : 프로필 목록)에 콘텐츠 요소를 배포하기위한 것입니다. 이를 염두에두고 여백이있는 요소를 간격을 두어 내용 영역에 영향을주지 않도록하는 것이 좋습니다. 예를 들어 배경색이나 테두리를 추가 할 수 있습니다.

그러나 문서에서는 <Grid> 의 사용법을 설명하는 "Layout"이라는 전체 섹션을 사용하여 <Grid> 요소를 기본 레이아웃에 사용해야한다고 제안합니다.

많은 사람들이 이것을 반 직관적으로 생각하는 또 다른 이유는 다른 모든 UI 프레임 워크가 기본 레이아웃 (80 % 사례, @oliviertassinari로 간주 됨)을 수행하기위한 메커니즘을 제공하고 콘텐츠 항목 그리드를 배치하는 것이 두 번째 관심사이기 때문입니다.

그러나 문서는요소는 사용을 설명하는 "Layout"이라는 전체 섹션을 포함하여 기본 레이아웃에 사용되어야합니다..

@wmadden 레이아웃 문구를 사용하면 앱 / 기본 레이아웃에 관한 것이라고 생각하는 이유는 무엇입니까?

많은 사람들이 이것을 직관에 반하는 또 다른 이유

반 직관이란 무엇입니까?

80 % 케이스로 간주됩니다

동의합니다. # 10986이 있습니다.

@wmadden 레이아웃 문구를 사용하면 앱 / 기본 레이아웃에 관한 것이라고 생각하는 이유는 무엇입니까?

구성 요소 데모가 아니라 "레이아웃"이라는 최상위 섹션에 있습니다. 그리고 다음과 같이 표현 :

그리드는 다양한 디자인에 걸쳐 유연성을 허용하면서 레이아웃간에 시각적 일관성을 만듭니다. 머티리얼 디자인의 반응 형 UI는 12 열 그리드 레이아웃을 기반으로합니다.

내 응용 프로그램을 레이아웃하는 데 사용하는 것이 적절하다고 가정했습니다. 음의 여백 제한이 빠르게 문제가됩니다.

많은 사람들이 이것을 직관에 반하는 또 다른 이유

UI 프레임 워크는 일반적으로 해당 목적을위한 레이아웃 솔루션을 제공하고 일반적으로 "레이아웃"이라는 최상위 문서 주제에 있기 때문에 그리드 구성 요소를 기본 레이아웃에 사용해서는 안된다는 것이 사람들의 직관에 반한다는 것을 의미했습니다.

React에서는 자식이 부모에게 포함된다는 것이 일반적인 가정입니다. <Grid> 의 마이너스 마진은 부모의 경계를 넘어 확장함으로써 이러한 가정을 깨 뜨리며, 의도적으로 설계된 것인지 모르는 사람에게는 그 행동이 버그처럼 보입니다.

@ vedant1811 음수 여백은 더 이상 기본 동작이 아닙니다. 애플리케이션 레벨 레이아웃에 그리드 없이도 그리드를 사용할 수 있어야합니다.

@oliviertassinari 이것을 변경 한 업데이트가 있었습니까? 내 버전의 패키지를 업데이트해야하는지 궁금합니다. 이전에 부모 요소 해결 방법에 overflow: hidden; 을 사용했습니다.

@saricden 예, spacing 속성을 제공하지 않음으로써 사용 가능한 대부분의 그리드 라이브러리에는이 기능이 없으므로 사람들이 마진을 처리 할 수 ​​있습니다.

방금 만났어요. 또 다른 해키처럼 보이지만 괜찮은 해결 방법은 그리드 컨테이너에 너비 : 'calc (100 %-16px)'를 넣는 것입니다.

서로 다른 중단 점에 대해 서로 다른 너비로 플레이하면이를 개선 할 수 있지만 화면이 더 넓은 컨테이너를 생성 할 때 문제가 훨씬 덜 눈에 띄게 나타납니다.

여전히 동일한 문제가 있지만 xs = {12}를 추가하여 해결했습니다.
<Grid container spacing={3} xs={12}>

이 문제는 여전히 발생합니다. spacing={...} 하면 가로 스크롤이 발생합니다. xs={12} 추가해도 문제가 해결되지 않습니다.

_ 가치가있는 부분 : _
Material-UI 4.5.0에서이 문제가 발생합니다. 어떤 이유로 나는 방금 이것을 알아 차리고 Material-UI를 1 년 넘게 사용하고 있습니다.

여백 스타일 외에 위의 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 값을 설정하면 작동하지 않습니다.

그리드 컨테이너 여백을 0으로 설정하기 위해 스타일이 지정된 구성 요소를 사용하여이 문제를 해결했습니다.

스타일 그리드 컨테이너 :

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://github.com/evgenyrodionov/flexboxgrid2/commit/37e02fec7674495782098fb8e9a2c6d20a2786e1#diff -4b62e0ae269a54df45ab5eab9cb7821b?

같은 문제가 발생하여 다음을 수행하여 반 수정을 찾았습니다.

<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 프레임 워크에는 너무 많은 버그가 있습니다. 너의

안녕하세요.

overflow-x: hidden 추가 후 문제 해결됨; 컨테이너 내부와 같이 상위에 mui-datatable이 있으므로 overflowX: 'hidden' 을 컨테이너에 추가했습니다.

이것의 문제는 여전히 스크롤 할 수 있다는 것입니다. overflow-x : 숨김은 좋은 해결책이 아닙니다.

MuiGrid : {
컨테이너 : {
너비 : "100 %! 중요",
여백 : "0! 중요"
}
},
뿡 빵뀨
이는 전체 프레임 워크의 구조를 강제로 수정하는 것이며 권장하지 않습니다. 한 곳에서 고치고 다른 곳에서 깰 수 있습니다.

@ 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는 내 그리드 정의 아래 어딘가에 추가 된 것 같으므로 실제 값은 다른 사람들과 다를 수 있습니다.