reactjs - 添加用于关闭 Material-UI 抽屉的取消图标

Question

我使用带有 onClick 属性的 IconButton 来捕获事件以关闭持久性右侧抽屉。这一切都完美地工作:

const styles = {
  list: {
    width: 250,
  },
  fullList: {
    width: 'auto',
  },
  close: {
    margin: 10,
    opacity: 0.7,
  }
};

class ContextDrawer extends Component {

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

    const sideList = (
      <div className={classes.list}>
        <CheckedList />
      </div>
    );

    return (
      <div>
        <Drawer
          variant="persistent"
          anchor="right"
          open={this.props.open}
        >
          <div
            tabIndex={0}
            role="button"
          >
          <IconButton onClick={this.props.closeContextDrawer}>
            <CancelIcon className={classes.close} />
          </IconButton>
            {sideList}
          </div>
        </Drawer>
      </div>
    );
  }
}

export default withStyles(styles)(ContextDrawer);

```

这给了我这个:

但是，IconButton 上的 style={{ float: 'right' }} 导致点击图标​​时不再触发操作，而是显示红色抽屉顶部的轮廓:

有没有更好的方法来显示抽屉关闭的图标？

Answer 1

通过将 IconButton 包装在 DialogTitle 中并在 DialogTitle 上使用特定类，我有一个可行的解决方案:

  <Drawer
    variant="persistent"
    anchor="right"
    open={this.props.open}
  >
  <DialogTitle disableTypography className="drawerTitle">
    <IconButton onClick={this.props.closeContextDrawer}>
        <CancelIcon />
    </IconButton>
  </DialogTitle>
    {sideList}
  </Drawer>

css 是:

.drawerTitle {
  display: flex;
  justify-content: flex-end;
  padding: 0 !important;
}

产生:

更新

有一种更好更简洁的方法可以做到这一点，至少对于左侧和右侧的抽屉是这样。您可以使用:

  <div className={classes.drawerHeader}>
    <IconButton onClick={closeDrawer}>
      <ChevronLeftIcon />
    </IconButton>
  </div>
  </Divider>

这会给你这个:

我用于页眉的 CSS 是:

const styles = theme => ({
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
  },
  ..

因为引入默认的 mixins 会将抽屉标题设置为与适当断点处的工具栏相同的高度。