narvoxx narvoxx - 1 month ago 27
CSS Question

Simple Label in material-ui AppBar

I wanted to have a simple label displayed in the right part of the AppBar. I'm currently using the

iconElementRight
prop and pass a disabled flat button:

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


This feels terrible but I couldn't find a different way to do this without having to do my own styling.

I tried with a simple div but it styles terribly:

<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 something I am missing other than doing custom styling/disabled button hack?

Answer

By definition, the App Bar component doesn't style plain text, because:

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

App Bar - Material-UI

A standalone label is used for neither branding, navigation, search nor actions.

For that reason, if you're wanting to circumvent this standard you will have to style this yourself.