我无法覆盖 DialogActions 的 material-ui 根样式

Question

我在 DialogActions like so. 中有两个按钮

我拥有的 JSX 如下：

<DialogActions classes={{ root: classes.dialogActionsLeft }}>
  <Button
    autoFocus
    onClick={() => {
      setOpen(false);
    }}
  >
    Cancel
  </Button>
  <Button
    onClick={() => {
      setOpen(false);
      navigate("/");
    }}
  >
    Finish
  </Button>
</DialogActions>

我拥有的 CSS 是：

const useStyles = makeStyles((theme) => ({
  dialogActionsLeft: {
    "&:nth-child(1)": {
      justifyContent: `flex-start`
    }
  }
}));

如果伪选择器不存在，则两个按钮都将左对齐，如果存在，则两个按钮都保持右对齐。这告诉我我使用的伪选择器错误，但我不知道如何修复它

Answer 1

是否需要左对齐两个按钮？ 如果是这种情况，请尝试&:nth-child(n)。

更新

您还必须为 dialogActionsLeft 指定 justifyContent。

dialogActionsLeft: { justifyContent: 'space-between', '&:nth-child(1)': { justifyContent: flex-start, } }