javascript - Material-UI Drawer 在平板电脑上的作用不同

Question

我在 Material-UI 抽屉组件中遇到了一些奇怪的问题。它在我的 iPad 上水平滚动，而我的 MacBook 和 Android 手机实际上是垂直滚动的。

MacBook 上的结果（应该是这样的..）：

如您所见，它向下滚动并垂直溢出，就像在我的手机上一样

iPad上的结果（它不应该是..）：

但是，如您所见.. 在我的 iPad 上它水平溢出..？

抽屉的代码：

<Drawer
  anchor="right"
  open={open}
  onClose={HandleClose}
  classes={{ paper: classes.drawerPaper }}>
    <Toolbar />
      <Typography className={classes.title}>Selecteer actieve regio's</Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup>
          {regios.map(regio => (
            <FormControlLabel
              control={
                <Checkbox
                  checked={geselecteerdeRegios.includes(regio.ID)}
                  onChange={e => handleRegioChange(regio.ID, e.target.checked)}
                />
              }
              name={regio.Naam}
              label={regio.Naam}
              key={regio.Naam}
            />
         ))}
    </FormGroup>
  </FormControl>
</Drawer>

这些是抽屉的样式

drawerPaper: {
  width: 320
},

为什么会这样？我怎样才能防止这种情况，只允许垂直滚动/溢出而不是水平..？

编辑：codesandbox： https ://codesandbox.io/s/elated-khayyam-t6klg?file=/src/Drawer.js

提前致谢！:-)

标签： javascriptcssreactjsmaterial-ui

Answer 1

这似乎与默认样式有关FormGroup：

  /* Styles applied to the root element. */
  root: {
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'wrap',
  },

您可以覆盖它nowrap以防止包装（如下所示classes.formGroup在您的沙箱的修改版本中）。我还没有花时间去理解为什么这在 iPad 上的行为与在其他设备上的行为不同。

import React from "react";
import {
  Drawer,
  FormControl,
  FormGroup,
  FormControlLabel,
  Checkbox,
  Toolbar,
  Typography,
  makeStyles
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  drawerPaper: {
    width: 320
  },
  formGroup: {
    flexWrap: "nowrap"
  }
}));

export default () => {
  let items = [];

  for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);

  const classes = useStyles();

  return (
    <Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
      <Toolbar />
      <Typography className={classes.title}>
        Selecteer actieve regio's
      </Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup className={classes.formGroup}>
          {items.map(item => (
            <FormControlLabel
              control={<Checkbox />}
              name={item}
              label={item}
              key={item}
            />
          ))}
        </FormGroup>
      </FormControl>
    </Drawer>
  );
};

不幸的是，这仍然在 iPad 上留下了一些奇怪的行为。它似乎试图在Drawer不滚动的情况下适应所有内容（例如，如果我添加 100 个项目而不是 25 个项目，它们仍然被迫适应并成为无法阅读的、压扁的混乱）。

我不完全理解发生了什么，但它似乎是height和之间display: flex的相互作用Drawer Paper。将显示从更改flex为block修复此问题。我没有看到由此引起的任何明显的新问题，但是我没有花很多时间来查看此更改导致的其他影响。通过此更改，上述“nowrap”更改似乎是不必要的。

import React from "react";
import {
  Drawer,
  FormControl,
  FormGroup,
  FormControlLabel,
  Checkbox,
  Toolbar,
  Typography,
  makeStyles
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  drawerPaper: {
    width: 320,
    display: "block"
  }
}));

export default () => {
  let items = [];

  for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);

  const classes = useStyles();

  return (
    <Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
      <Toolbar />
      <Typography className={classes.title}>
        Selecteer actieve regio's
      </Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup>
          {items.map(item => (
            <FormControlLabel
              control={<Checkbox />}
              name={item}
              label={item}
              key={item}
            />
          ))}
        </FormGroup>
      </FormControl>
    </Drawer>
  );
};