<网格>在材质ui中导致水平滚动-React
我正在使用此命令安装的 Material-UI
版本1:
I'm using Material-UI
version 1. installed by this command:
npm install -S material-ui@next
每次我要使用时,页面上都会出现不必要的水平滚动.
Everytime I want to use , an unwanted horizontal scroll appears in the page.
代码:
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
是一些自制组件,它们可以正常工作,并且使用它们而不会引起水平滚动.
Bootstrap
and other grid layout
options are in conflict with this library. When I use <Grid>
in other parts of a component(for example in drawer), horizontal scroll appears makes the UI ugly
NavMenu
and LoginPanel
are some self-made components and they work and using them without doesn't cause horizontal scroll.
我遇到了同样的问题.我想出了几种解决方案,但都感觉不太优雅:
I had the same issue. I figured out a couple solutions but neither feel very elegant:
禁用间距
不幸的是,这会删除容器中子网格项的所有填充:
Disable spacing
Unfortunately this removes all padding from child grid items within the container:
<Grid container
spacing={0}>
手动修复CSS
这就是我最终要做的:
Manually fix the CSS
This is what I ended up doing:
<Grid container
style={{
margin: 0,
width: '100%',
}}>