Material-UI 对话框按钮的左对齐

Question

我在对话框中有三个按钮，如下所示：

JSX 是

        <DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} >
          <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
            Clear
          </Button>
          <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
            Cancel
          </Button>
          <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose(this.state.selectedValue)} >
            Select
          </Button>
        </DialogActions>

'buttonRoot' 样式只决定按钮的颜色。如何左对齐“清除”按钮使其位于左侧？似乎每个按钮都在一个带有 MuiDialogActions-action 类的 div 中。

Answer 1

只需使用flex: 1 0 0CSS 样式的分隔线元素：

<DialogActions>
  <Button>
    Left
  </Button>
  <Button>
    Buttons
  </Button>
  <div style={{flex: '1 0 0'}} />
  <Button>
    Right
  </Button>
  <Button>
    Buttons
  </Button>
</DialogActions>

Answer 2

不需要复杂的答案：

只需将DialogActions组件设置style为{justifyContent: "space-between"}

<DialogActions style={{ justifyContent: "space-between" }}>
  <Button>
    Left
  </Button>
  <Button>
    Right
  </Button>
</DialogActions>

Answer 3

您可以使用first child选择器，因为第一个按钮是标签中的清除按钮DialogActions

DialogActions button:first-child {
  float:left;
}

或者

你可以试试。您需要相应地调整左侧和底部属性。

DialogActions{
  position:relative;
  width:100%;
}
DialogActions button:first-child {
  position:absolute;
  left:10px;
  bottom:10px;
}

希望对您有帮助。