I was hoping to display a simple label on the right side of the AppBar. Currently, I am using the iconElementRight prop and inserting a disabled flat button:
<AppBar
iconElementRight={<FlatButton label="My Label" disabled={true}/>}
/>
This approach doesn't feel great, but I couldn't find an alternative method without resorting to custom styling.
I attempted to use a basic div, but the styling turned out poorly:
<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>Is there a better solution aside from implementing custom styling or using the disabled button workaround?