Left alignment of Material-UI dialog buttons

material-ui button
material-ui dialog actions
material-ui dialog position
material-ui button hover
material-ui fab
material-ui dialog width
material-ui multiple dialogs
material-ui close button

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>

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>

DialogActions API, The API documentation of the DialogActions React component. Learn more about the props and the CSS customization points. Import. import� Use these shorthand utilities for quickly configuring the position of an element.

You can do it with the 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>

Button API, The API documentation of the Button React component. Learn more about the props and the CSS customization points. Outlined Buttons. Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.

According to the DialogActions API the classes you can override are root and spacing.

After taking a look at the implemantation of the component you can see in root class the rule justifyContent: 'flex-end'.

I simply apllied justifyContent: 'flex-start' with another class:

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

Make sure to create the class leftAlignDialogActions with makeStyles

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

Dialog API, The API documentation of the Dialog React component. Learn more about the props and the CSS customization points. Dialog. Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed

You can use first child selector because first button is clear button in tag DialogActions

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

OR

You can try. You need to adjust left and bottom property accordingly.

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

Hope it helps you.

Button React component, Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: Dialogs; Modal windows; Forms; Cards; Toolbars� Spacing. A wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. Notation. The space utility converts shorthand margin and padding props to margin and padding CSS declarations.

Typography API, 'left' | 'center' | 'right' | 'justify', 'inherit', Set the text-align on the component. MuiTypography-button, Styles applied to the root element if variant="button" . h1 . The API documentation of the Typography React component. Learn more about the props and the CSS customization points.

Grid API, If true , the component will have the flex item behavior. You should be wrapping items with a container. justify, 'flex-start' | 'center' | 'flex� Dialogs use text buttons because the absence of a container helps unify the action with the dialog text. Align text buttons to the right edge for left-to-right scripts. Text buttons minimize distraction from card content.

Dialog action button position � Issue #9731 � mui-org/material-ui , Is there a way to access the div of the action buttons? I have a Dialog. In it I have a grid with 1 Row and 2 Col. One column is grey, the other is� Hi all, got some theme from theme roller and trying construct dialog using it. Used following code and got following picture: $("#register_div").dialog({ Dialog buttons position - jQuery Forum