material ui에서 수평 스크롤이 발생합니다. -

material ui에서 수평 스크롤이 발생합니다. -

사용하고 있다Material-UI버전 1. 다음 명령으로 설치됩니다.

npm install -S material-ui@next

사용할 때마다 페이지에 불필요한 가로 스크롤이 표시됩니다.

코드:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';


/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';

const styleSheet = createStyleSheet('FullWidthGrid', theme => ({
  root: {
    flexGrow: 1,
    marginTop: 0,
  },
  paper: {
    padding: 16,
    textAlign: 'center',
    color: theme.palette.text.secondary,
    marginTop: "3rem"
  },
}));

function Login(props) {
    const classes = props.classes;
    return (
    <div className={classes.root}>
      <Grid container gutter={24} justify='center'>
        <Grid item xs={12} md={12} sm={12} lg={12}>
          <NavMenu/>
        </Grid>
        <Grid item xs={6} sm={6} md={6} lg={6}>
          <Paper className={classes.paper}>
            <LoginPanel />
          </Paper>
        </Grid>
      </Grid>
    </div>
    );
}

Login.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(Login);

Bootstrap기타grid layout옵션이 이 라이브러리와 충돌합니다.사용할 때<Grid>컴포넌트의 다른 부분(예: 드로어)에서 수평 스크롤이 나타나면 UI가 보기 흉해집니다.NavMenu그리고.LoginPanel스스로 만든 컴포넌트입니다.이 컴포넌트는 동작합니다.이 컴포넌트를 사용하지 않고 사용해도 수평 스크롤은 발생하지 않습니다.

저도 같은 문제가 있었어요.몇 가지 해결책을 찾아냈지만 둘 다 우아한 느낌이 들지 않는다.

공백 사용 안 함
안타깝게도 컨테이너 내의 하위 그리드 항목에서 모든 패딩이 제거됩니다.

<Grid container
  spacing={0}>

CSS를 수동으로 수정하다
결국 이렇게 된 거야

<Grid container
  style={{
    margin: 0,
    width: '100%',
  }}>

코멘트에서 간단한 솔루션 복사:

추가된xs={12}로.<Grid container>

<Grid container spacing={3} xs={12}>

https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645에 크레딧을 기입해 주세요.

이 원인은spacing때때로 우리는 여전히 사용할 수 있다.spacing컨테이너 아래에 그리드를 제한합니다.

<Container maxWidth={false}>
  <Grid container spacing={6}>
    Omit
  </Grid>
</Container>

여기서 가장 좋은 해결책은 그리드를 최대 너비로 용기에 감싸는 것입니다.

<Container>
    <Grid container spacing={2}>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
        <Grid item sm={6}></Grid>
   </Grid>
</Container>

이렇게 하면 컨테이너가 오버플로를 처리하고 그리드는 항상 응답적으로 상위 항목으로 확장됩니다.이것은 지금까지 내가 발견한 것 중 가장 우아한 해결책이다.

힌트: 이 라이브러리를 사용하여 대시보드와 같은 것을 작성하는 경우 콘텐츠 영역의 상위 영역은 항상 다음과 같습니다.<Container>이렇게 하면 오버플로 문제가 발생하지 않습니다.한번 해봐.한동안 고군분투하다가 도처에서 우아하지 않은 해결책을 찾은 후에야 잘 작동했습니다.이것은 리액트 머티리얼 UI 페이지에 잘 기록되어 있어야 합니다.

나한텐 효과가 있었어!

<Box style={{overflow: 'auto'}}>
<Grid>...</Grid>
</Box>

현재 근본적인 문제는 최신 버전의 Material-UI(v5.0.0-alpha.30)에서 해결되었습니다.https://github.com/mui-org/material-ui/issues/7466#issuecomment-820736245 를 참조해 주세요.

나도 같은 문제에 직면해 있었다.그리드 컨테이너에서 간격을 제거해도 해결되지 않습니다.

솔루션:

그리드 컨테이너의 부모에서 를 설정하는 대신 maxWidth를 설정하면 문제가 수정되고 원하는 너비가 할당됩니다.예를 들어 그리드 컨테이너의 부모인 상자에 maxWidth를 설정하면 그리드가 수평으로 오버플로하지 않습니다.

그리드 컨테이너의 목적은 기본적으로 100% 너비에 적응하는 것이므로 그리드 컨테이너에서 너비를 100% 설정할 필요가 없습니다.

 <Box style={{ maxWidth: 600}}>
     <Grid container spacing={3}>
     ...
     </Grid>
 </Box>

내가 생각해낸 아이디어는

<Grid container>
 <Grid item xs={12} md={4}>
    <div style={{width:"97%",margin:"0 auto"}}>
     .....Your content
     </div>
  </Grid>
  <Grid item xs={12} md={4}>
    <div style={{width:"97%",margin:"0 auto"}}>
     .....Your content
     </div>
  </Grid>
  <Grid item xs={12} md={4}>
    <div style={{width:"97%",margin:"0 auto"}}>
     .....Your content
     </div>
  </Grid>
 </Grid>

이것은 마이너스 마진을 가진 그리드의 알려진 한계이다.https://material-ui.com/components/grid/ #제한사항

1. 그리드 간격을 사용하지 말고 수동으로 간격을 구성하십시오.

2. 부모에 간격의 절반 이상과 같은 패딩을 추가합니다. 예:

   12 = 3 (표준) * 8 (표준 간격 픽셀) / 2

<Box p={12}> {/* or style={{ padding: 12 }} */}
  <Grid ... spacing={3}>
    ..additional configuration
  </Grid>
</Box>

이 솔루션의 단점은 컴포넌트의 외관을 바꾸는 것입니다.

3. set overflow-x: 숨김

<Box style={{overflowX: "hidden"}}>
  <Grid ... spacing={3}>
    ..additional configuration
  </Grid>
</Box>

이 솔루션의 단점은 (테스트에서) 터치스크린이 세로로 스크롤하려고 할 때 문제가 발생한다는 것입니다.

않아서, 을 ' 쪽인가 하면 '어느 쪽인가'로 .Container음음음같 뭇매하다

<Container component="div" sx={{ maxWidth: "100vw" }}>
  <Grid container spacing={3}>
    ...
  </Grid>
</Container>

언급URL : https://stackoverflow.com/questions/45519275/grid-in-material-ui-causes-horizontal-scroll-react