Material-ui-next Responsive Drawer缺少边框

Question

您好我正在使用材料ui下一个响应抽屉，当主要内容有许多项目抽屉缺少右边框。

我刚刚复制了https://material-ui-next.com/demos/drawers/自适应抽屉示例

Answer 1

这是一个简单的解决方案。更改root类的高度。默认设置为430，以便它适合文档的演示页面。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List from 'material-ui/List';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from '@material-ui/icons/Menu';
import { mailFolderListItems, otherMailFolderListItems } from './tileData';

const drawerWidth = 240;

const styles = theme => ({
  root: {
    flexGrow: 1,

    //CHANGE THIS TO WHATEVER HEIGHT e.g. '100%'

    height: 430,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    width: '100%',
  },
  ....
});

class ResponsiveDrawer extends React.Component {
  state = {
    mobileOpen: false,
  };

  handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };

  render() {
    const { classes, theme } = this.props;

    const drawer = (
      <div>
        <div className={classes.toolbar} />
        <Divider />
        <List>{mailFolderListItems}</List>
        <Divider />
        <List>{otherMailFolderListItems}</List>
      </div>
    );

    return (
      <div className={classes.root}>
      ...
      </div>
    );
  }
}

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

export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);

Answer 2

height:1000px我没有错误。发布你的代码。

Answer 3

添加一个JSFiddle，我会看看能否帮到你。但是，您可以使用浏览器检查器检查元素，您可以尝试在height类中添加j137属性：

没有财产：

使用heigth属性