MaterialUIを使用したツールバー内のアバター

Question

MaterialUIコンポーネントを使用してツールバー内にアバターコンポーネントを配置する方法はありますか？

<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> 

私はアバターをフレキシブルなCSS属性を使用してアバターを垂直に整列させています。 Toolbarは、material-uiライブラリでflexboxを使用して最近再設計されました。

フレックスボックスプロパティを使用して、ToolbarとToolbarGroupの内容を整列させることができます。

これが役に立ちます。