Material-ui中的簡單標籤AppBar

我想在AppBar的右側顯示一個簡單的標籤。我目前使用的iconElementRight道具，並通過禁用平按鈕：Material-ui中的簡單標籤AppBar

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

有我丟失的東西不是做定製造型/關閉按鈕劈其他？

來源

2016-10-26 narvoxx

根據定義，應用欄組件沒有風格的純文本，這是因爲：

應用欄，前身爲Android的操作欄上，是所使用的品牌一種特殊的工具欄，導航，搜索和操作。

– App Bar - Material-UI

一個獨立的標籤，用於既不品牌，導航，搜索，也沒有行動。

因此，如果你想繞過這個標準，你將不得不自己設計風格。

來源

2016-10-26 09:34:25

Material-ui中的簡單標籤AppBar

回答

相關問題