material-ui AppBar中的简单标签答案

【问题标题】：Simple Label in material-ui AppBarmaterial-ui AppBar中的简单标签
【发布时间】：2016-10-26 09:27:40
【问题描述】：

我想在 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>

除了自定义样式/禁用按钮之外，我还缺少什么吗？

【问题讨论】：

标签： css material-ui

【解决方案1】：

根据定义，App Bar 组件不会设置纯文本样式，因为：

应用栏，以前在 Android 中称为操作栏，是一种特殊的工具栏，用于品牌、导航、搜索和操作。

——App Bar - Material-UI

独立标签既不用于品牌推广、导航、搜索也不用于操作。

因此，如果您想绕过此标准，则必须自己设置样式。

【讨论】：