Material-ui内のシンプルラベルAppBar

Question

AppBarの右部分にシンプルなラベルを表示したかったのです。私は現在、iconElementRight小道具を使用して、無効フラットボタンを渡しています：

<AppBar 
    iconElementRight={<FlatButton label="My Label" disabled={true}/>} 
/> 

これはひどい感じが、私は自分のスタイリングを行うことなく、これを行うための別の方法を見つけることができませんでした。私はスタイルがすごく簡単なdiv要素をしようとしたが、それ

：

<AppBar 
    iconElementRight={<div><span>MyLabel<span></div>} 
/> 

<div style="border-radius: 0px; transition:450ms cubic-bezier(0.23, 1, 0.32, 1); width: 100%; color: rgba(0, 0, 0, 0.87); padding-right: 24px; padding-left: 24px; font-family: Roboto, sans-serif; display: flex; position: relative; z-index: 1100; box-sizing: border-box; box-shadow: 0px 1px 6px rgba(0,0,0,0.12), 0px 1px 4px rgba(0,0,0,0.12); background-color: rgb(250, 250, 250);"> 
 
    <button tabindex="0" style="background: none; margin: 1px 8px 0px -16px; padding: 12px; border: 10px currentColor; transition:450ms cubic-bezier(0.23, 1, 0.32, 1); border-image: none; width: 48px; height: 48px; overflow: visible; font-family: Roboto, sans-serif; font-size: 0px; font-weight: inherit; text-decoration: none; display: inline-block; position: relative; cursor: pointer; box-sizing: border-box; transform: translate(0px, 0px);" 
 
    type="button"> 
 
    
 
    </button> 
 
    
 
    <div style="margin-top: 1px; margin-right: -16px; margin-left: auto;"> 
 
    <div><span>My Label</span> 
 
    </div> 
 
    </div> 
 
</div>

は、私はハックカスタムスタイリング/無効化]ボタンを行うよりも、他の行方不明です何かはありますか？定義により

Answer 1

ので、アプリケーションバーのコンポーネントは、プレーンテキストのスタイルを設定しません。以前のAndroidでのアクションバーとして知られているアプリバーは、ブランディングのために使われているツールバーの特別な種類です

、ナビゲーション、検索、およびアクションが含まれます。

– App Bar - Material-UI

スタンドアロンラベルはブランディング、ナビゲーション、検索でもアクションでもないために使用されています。

このため、この規格を迂回したい場合は、自分でスタイルを設定する必要があります。