使用 MaterialUI 将头像置于工具栏内

Question

有没有办法将 Avatar 组件与 MaterialUI 组件一起放在 Toolbar 中？

<Toolbar>
    <ToolbarGroup float="right" lastChild>
        <ToolbarTitle text="Toolbar"/>
        <Avatar src="images/avatar.jpg"/>
    </ToolbarGroup>
</Toolbar>

我玩了这几个小时但没有成功。

Answer 1

你指的是垂直对齐还是水平对齐？任何人都可以使用style属性来覆盖默认样式。

 <Toolbar>
    <ToolbarGroup float="right" lastChild={true}>
        <ToolbarTitle text="Toolbar" />
        <Avatar src="images/uxceo-128.jpg" style={{alignSelf: 'center'}} />
    </ToolbarGroup>
  </Toolbar>

我在头像上使用 flexbox css 属性来垂直对齐头像。Toolbar最近经过重新设计，在flexbox图书馆中使用material-ui。

Toolbar因此，您可以使用 flexbox 属性来对齐和中的内容ToolbarGroup。

希望这可以帮助。