Question

我在工具栏中有2个IconButton，我想使其中一个在右侧，另一个在左侧，但两者都在右侧。这是我的代码

<AppBar
    position="fixed"
    >
    <Toolbar>
    <IconButton onClick={this.drawerClickHandel}> #======> #1
        <MenuIcon style={{ marginLeft: 'auto', color:'#e0e0e0'}}/>
    </IconButton>
    <IconButton style={{flex: 'auto'}}> #======> #2
        <MenuIcon style={{ marginRight: 'auto', color:'#e0e0e0'}}/>
    </IconButton>
    <IconButton style={{flex: 'auto'}}> #======> #3
        <MenuIcon style={{ marginRight: 'auto', color:'#e0e0e0'}}/>
    </IconButton>
    </Toolbar>
</AppBar>

我想要工具栏右侧的数字1和左侧的数字2和3

Answer 1

我找到答案了，我应该像这样在iconButton 2和3的周围使用<Div

<AppBar
position="fixed"
>
<Toolbar>
<IconButton onClick={this.drawerClickHandel}> #======> #1
    <MenuIcon style={{ marginLeft: 'auto', color:'#e0e0e0'}}/>
</IconButton>
<Div ClassName="MyDiv">
    <IconButton style={{flex: 'auto'}}> #======> #2
        <MenuIcon style={{ marginRight: 'auto', color:'#e0e0e0'}}/>
    </IconButton>
    <IconButton style={{flex: 'auto'}}> #======> #3
        <MenuIcon style={{ marginRight: 'auto', color:'#e0e0e0'}}/>
    </IconButton>
</Div>
</Toolbar>

而对于css文件

.MyDiv{
   flex-grow: 1;
}

React-JS中AppButton在AppBar中的位置

1 个答案: