Material-ui-下一个响应式抽屉缺少边框

Question

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

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

Answer 1

这是一个简单的解决方案。更改 root class 的高度。它默认设置为 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 我没有这个错误。 Post 你的代码。

Answer 3

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

没有属性 :

和heigth属性

Material-ui-下一个响应式抽屉缺少边框

Material-ui-next Responsive Drawer missing border

border

reactjs

material-ui