Aligning in CSS and Material UI in React

Question

How do I align one button to the left while the other two on the center?

Pls check codesandbox here CLICK HERE

    <DialogActions sx={{ justifyContent: "center" }}>
      <Button>Left</Button>
      <Button onClick={handleClose}>Cancel center</Button>
      <Button onClick={handleClose}>Subscribe center</Button>
    </DialogActions>

Answer 1

You can achieve that using Grid. Check out below codes.

<DialogActions
  sx={{
    display: "grid",
    gridTemplateColumns: "1fr repeat(2, auto) 1fr",
    justifyContent: "center"
  }}
>
  <Button sx={{ marginRight: "auto" }}>Left</Button>
  <Button onClick={handleClose}>Cancel center</Button>
  <Button onClick={handleClose}>Subscribe center</Button>
</DialogActions>

Answer 2

Set position and left attribute to Left Button.

<Button sx={{ position: "absolute", left: 0 }}>Left</Button>