Question

我想在AppBar的右侧显示一个简单的标签。我目前正在使用iconElementRight道具并传递一个禁用的平面按钮：

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

这感觉很糟糕，但我无法找到一种不同的方式来做到这一点，而不必自己造型。

我尝试了一个简单的div，但它的风格很糟糕：

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

＆＃13;

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

＆＃13;

除了进行自定义样式/禁用按钮黑客攻击外，还有其他一些问题吗？

Answer 1

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

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

- App Bar - Material-UI

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

出于这个原因，如果你想要绕过这个标准，你将不得不自己设计。

材料-ui AppBar中的简单标签

1 个答案: