Left alignment of Material-UI dialog buttons

Question

I have three buttons in a Dialog like so:

The JSX is

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

The 'buttonRoot' style simply determines the button coloring. How to I left align the 'Clear' button so it sits on the left? It seems the buttons are each in a div with a MuiDialogActions-action class.

Answer 1

Just use divider element with flex: 1 0 0 CSS style:

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