使用响应式抽屉示例时，Material UI表格无法响应。

Question

使用响应式抽屉示例时，Material UI表格无法响应。

reactjsresponsive-designmaterial-ui

6

我使用基于Material-UI示例的响应式抽屉创建了一个Web应用程序。

我正在尝试使表格根据屏幕宽度进行自适应调整，但由于Material-UI提供的ResponsiveDrawer容器破坏了内容（即表格）的响应性，因此未能实现。

这是我的一个示例，它完全具备响应性：

App.js

import React from "react";
import ReactDOM from "react-dom";
import Table from "@material-ui/core/Table/Table";
import TableHead from "@material-ui/core/TableHead/TableHead";
import TableRow from "@material-ui/core/TableRow/TableRow";
import TableCell from "@material-ui/core/TableCell/TableCell";
import TableBody from "@material-ui/core/TableBody/TableBody";
import Paper from "@material-ui/core/Paper/Paper";
import Grid from "@material-ui/core/Grid/Grid";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Grid container justify={"center"}>
        <Grid item xs={12} md={10} style={{ padding: "8px" }}>
          <Paper style={{ overflowX: "auto" }}>
            <Table style={{ minWidth: "340px" }}>
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>
                  <TableCell>Column</TableCell>
                  <TableCell>Operating System</TableCell>
                  <TableCell>Status</TableCell>
                  <TableCell>CPU Cores</TableCell>
                  <TableCell>Memory (MB)</TableCell>
                  <TableCell>IP Address</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                  <TableCell>Content</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这里是同一个例子（链接），但使用了修改后的（将内容更改为this.props.children而不是静态内容）Material-UI的ResponsiveDrawer版本。

ResponsiveDrawer.js

import React from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import MailIcon from "@material-ui/icons/Mail";
import MenuIcon from "@material-ui/icons/Menu";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";

const drawerWidth = 240;

const styles = theme => ({
  root: {
    display: "flex"
  },
  drawer: {
    [theme.breakpoints.up("sm")]: {
      width: drawerWidth,
      flexShrink: 0
    }
  },
  appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up("sm")]: {
      width: `calc(100% - ${drawerWidth}px)`
    }
  },
  menuButton: {
    marginRight: 20,
    [theme.breakpoints.up("sm")]: {
      display: "none"
    }
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3
  }
});

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

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

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

    const drawer = (
      <div>
        <div className={classes.toolbar} />
        <Divider />
        <List>
          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {["All mail", "Trash", "Spam"].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </div>
    );

    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar position="fixed" className={classes.appBar}>
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerToggle}
              className={classes.menuButton}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit" noWrap>
              Responsive drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <nav className={classes.drawer}>
          {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
          <Hidden smUp implementation="css">
            <Drawer
              container={this.props.container}
              variant="temporary"
              anchor={theme.direction === "rtl" ? "right" : "left"}
              open={this.state.mobileOpen}
              onClose={this.handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper
              }}
            >
              {drawer}
            </Drawer>
          </Hidden>
          <Hidden xsDown implementation="css">
            <Drawer
              classes={{
                paper: classes.drawerPaper
              }}
              variant="permanent"
              open
            >
              {drawer}
            </Drawer>
          </Hidden>
        </nav>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          {this.props.children}
        </main>
      </div>
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  // Injected by the documentation to work in an iframe.
  // You won't need it on your project.
  container: PropTypes.object,
  theme: PropTypes.object.isRequired
};

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

App.js

import React from "react";
import ReactDOM from "react-dom";
import Table from "@material-ui/core/Table/Table";
import TableHead from "@material-ui/core/TableHead/TableHead";
import TableRow from "@material-ui/core/TableRow/TableRow";
import TableCell from "@material-ui/core/TableCell/TableCell";
import TableBody from "@material-ui/core/TableBody/TableBody";
import Paper from "@material-ui/core/Paper/Paper";
import ResponsiveDrawer from "./ResponsiveDrawer";
import Grid from "@material-ui/core/Grid/Grid";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <ResponsiveDrawer>
        <Grid container justify={"center"}>
          <Grid item xs={12} md={10} style={{ padding: "8px" }}>
            <Paper style={{ overflowX: "auto" }}>
              <Table style={{ minWidth: "340px" }}>
                <TableHead>
                  <TableRow>
                    <TableCell>Name</TableCell>
                    <TableCell>Column</TableCell>
                    <TableCell>Operating System</TableCell>
                    <TableCell>Status</TableCell>
                    <TableCell>CPU Cores</TableCell>
                    <TableCell>Memory (MB)</TableCell>
                    <TableCell>IP Address</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  <TableRow>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </Paper>
          </Grid>
        </Grid>
      </ResponsiveDrawer>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我似乎无法弄清楚导致响应性出现问题的ResponsiveDrawer容器内部是什么。感谢任何帮助。

更新（2019年1月7日）：看起来从根中删除display: flex可以解决问题，但这样就会出现不遵守左抽屉的问题。

更新（2019年1月9日）：如@Gaurav Rana所建议的，我已经添加width: 100％;到主元素，并且已经解决了一半的问题。现在，当侧边栏不可见时，表格将正常溢出/滚动。但是，当侧边栏仍然可见但屏幕不够宽以显示整个表格时，表格会在侧边栏下方滚动。

- AKrush95

3个回答

1

这是一个与CSS宽度相关的问题。你必须像这样指定整个父元素的width: 100%，以使内容更加通俗易懂。请注意保留HTML标记。

body {
  width: 100%
}
.grandparent {
  width: 100%
}
.parent {
  width: 100%
}
.tableContainer {
  width: 100%
}

- Nagibaba

0

在你的styles.css文件中添加以下样式，希望这能解决你的问题。

main {
  width: 100%;
}

- Gaurav Rana

感谢您的回复！所以当屏幕在显示抽屉的断点以下时，它可以工作，但是当抽屉存在时就无法工作。https://codesandbox.io/s/6zl7r2lx0r - AKrush95

在index.js中，将(<Grid item xs={12} md={10} style={{ padding: "8px" }}>)更改为(<Grid item xs={12} style={{ padding: "8px" }}>)。 - Gaurav Rana

谢谢您的回复，但这也没有解决问题。问题是当侧边栏仍可见，但屏幕宽度足够小以至于表格无法适应时，表格会在侧边栏下滚动。 - AKrush95

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AKrush95 · Accepted Answer

经过一些故障排除，我找到了一个解决方案：

content 的样式需要按照以下方式更新（这将强制内容元素的宽度适应屏幕宽度减去抽屉的宽度，如果必要）：

  content: {
    [theme.breakpoints.up("sm")]: {
      marginLeft: drawerWidth,
      width: `calc(100% - ${drawerWidth}px)`
    }
  },

需要将 root 中的 display: flex 移除。

https://codesandbox.io/s/1zxp2qjmoj