我在对话框中有三个按钮,如下所示:
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”样式只决定按钮的颜色。如何左对齐“Clear”按钮,使其位于左侧?似乎每个按钮都在一个具有MuiDialogActions-action类的div中。
6条答案
按热度按时间ovfsdjhp1#
只需使用带有
flex: 1 0 0
CSS样式的分隔符元素:tyky79it2#
无需复杂的答案:
只需将组件
style
设置为{justifyContent: "space-between"}
zsbz8rwp3#
您可以使用***Flexbox***完成此操作:
***注:***全屏查看。
e1xvtsh34#
**编辑:这不回答问题。**它将所有按钮向左对齐。
根据DialogActions API,可以覆盖的类是根和间距。
查看组件的implemantation后,您可以在根类中看到规则justifyContent:“挠性端”。
我只是简单地应用了理由内容:“flex-start”与另一个类:
确保使用makeStyles创建类leftAlignDialogActions
hsvhsicv5#
我也可以使用
disableSpacing
,然后通过sx
属性添加所需的flex属性和MUI样式覆盖。在我的示例中,我必须将间距(间隙)从8px修改为10px。也许在你的情况下,另一个选择是将第二个和第三个按钮 Package 在
Box
组件中,并在容器上添加justifyContent: space-between
。这样,在flex容器中,你将有2个flex项,它们将被推到容器的左内边缘和右内边缘。左侧项目将是第一个按钮,右侧项目将是Box
,它将第2个和第3个按钮作为子按钮。bnl4lu3b6#
您可以使用
first child
选择器,因为标签DialogActions
中的第一个按钮是清除按钮或
你可以试试。你需要相应地调整left和bottom属性。
希望对你有帮助。