【问题标题】：Left alignment of Material-UI dialog buttonsMaterial-UI 对话框按钮的左对齐
【发布时间】：2018-08-01 20:33:27
【问题描述】：

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

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 中。

【问题讨论】：

标签： javascript html css material-ui

【解决方案1】：

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

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

【讨论】：

对于好奇的人来说，flex: 1 0 0 本质上意味着设置 flexGrow: 1，这会使 div 尽可能地增长。

【解决方案2】：

您可以使用 Flexbox：

DialogActions {
  display: flex; /* displays flex-items (children) inline */
}

DialogActions > Button:first-child {
  margin-right: auto;
}

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

注意：全屏查看。

【讨论】：

我最终得到了这个解决方案的衍生产品。我选择左侧的最后一个按钮并将 style={{ marginRight: "auto" }} 应用于那个按钮。

【解决方案3】：

编辑：这不能回答问题。它将所有按钮向左对齐。

根据DialogActions API，您可以覆盖的类是根和间距。

查看组件的implemantation 后，您可以在根类中看到规则 justifyContent: 'flex-end'。

我只是简单地将 justifyContent: 'flex-start' 应用到另一个类中：

<DialogActions classes={{ root: classes.leftAlignDialogActions }}>
   ....
</DialogActions>

确保使用 makeStyles 创建类 leftAlignDialogActions

const useStyles = makeStyles(theme => ({
leftAlignDialogActions: {
    justifyContent: 'flex-start'
  }
}))

【讨论】：

这将使它们全部在左侧对齐，他只要求第一个。

【解决方案4】：

无需复杂的答案：

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

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

【讨论】：

【解决方案5】：

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

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

或

你可以试试。您需要相应地调整 left 和 bottom 属性。

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

希望对你有帮助。

【讨论】：