添加用于关闭 Material-UI Drawer 的取消图标

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);

``

这给了我这个：

但是， a style={{ float: 'right' }}onIconButton导致单击图标不再导致操作，而是抽屉顶部的红色轮廓：

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

Answer 1

使用包含在 DialogTitle 中的 IconButton 和 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;
}

产生：

更新

有一种更好、更干净的方法可以做到这一点，至少对于左侧和右侧的 Drawers。您可以使用：

  <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 会将抽屉标题设置为与适当断点处的工具栏相同的高度。