Check out the two buttons in a DialogActions just like this.
This is the JSX snippet I'm working with:
<DialogActions classes={{ root: classes.dialogActionsLeft }}>
<Button
autoFocus
onClick={() => {
setOpen(false);
}}
>
Cancel
</Button>
<Button
onClick={() => {
setOpen(false);
navigate("/");
}}
>
Finish
</Button>
</DialogActions>
Here's the corresponding CSS code:
const useStyles = makeStyles((theme) => ({
dialogActionsLeft: {
"&:nth-child(1)": {
justifyContent: `flex-start`
}
}
}));
If the pseudo selector is omitted, both buttons align to the left. If included, they remain aligned to the right. It seems like I might be misusing the pseudo selector, but I'm struggling to find the solution