narvoxx narvoxx - 1 year ago 124
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

prop and pass a disabled flat button:

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:


<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);"


<div style="margin-top: 1px; margin-right: -16px; margin-left: auto;">
<div><span>My Label</span>

Is there something I am missing other than doing custom styling/disabled button hack?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download