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

```

这给了我这个

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

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

Answer 1

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

public static async void GetUserData()
{
    FirebaseApp app = FirebaseApp.DefaultInstance;
    app.SetEditorDatabaseUrl("https://narwhaltrivia.firebaseio.com/");
    if (app.Options.DatabaseUrl != null) app.SetEditorDatabaseUrl(app.Options.DatabaseUrl);

    DatabaseReference reference = Firebase.Database.FirebaseDatabase.DefaultInstance.RootReference;
    loggedUserId = FirebaseAuth.DefaultInstance.CurrentUser.UserId;

    await reference.Database.GetReference("users").Child(loggedUserId).GetValueAsync().ContinueWith(task =>
    {
        if (task.IsFaulted)
        {
            Debug.LogError("Error retrieving user data");
            return;
        }
        if (task.IsCompleted)
        {
            DataSnapshot userSnapshot = task.Result;
            loggedEmail = userSnapshot.Child("email").GetRawJsonValue();
            loggedCurrentScore = userSnapshot.Child("currentScore").GetRawJsonValue();
            loggedLevel = userSnapshot.Child("level").GetRawJsonValue();
            loggedLives = userSnapshot.Child("lives").GetRawJsonValue();
            loggedRound = userSnapshot.Child("round").GetRawJsonValue();
            loggedTotalScore = userSnapshot.Child("totalScore").GetRawJsonValue();
            return;
        }
    });
}

css是：

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

产生：

更新

至少在左侧和右侧抽屉中，有一种更好，更清洁的方法。您可以使用：

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

这将为您提供：

我用于标题的CSS是：

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

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

添加“取消”图标以关闭Material-UI抽屉

1 个答案: