Css 我无法覆盖DialogActions的材质ui根样式

我在对话框中有两个按钮

我拥有的JSX如下所示：

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

---

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

是否需要将两个按钮左对齐？ 如果是这种情况，请尝试

&第n个子项（n）

更新

---

您还必须为dialogActionsLeft指定justifyContent

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

---

不，我需要第一个按钮左对齐，第二个按钮右对齐。您还必须为dialogActionsLeft指定justifyContentdialogActionsLeft:{justifyContent:'之间的空格'，'&:n子项（1）{justifyContent:

flex start

，}}}`很高兴听到这个消息。我已经编辑了我的答案。如果可以，接受它作为答案。如果没有，不用担心。

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