CODEWITHSUNDEEP
reactjsmaterial-uiappbar
dlwiest
dlwiest

Reputation: 655

Is it possible to add a subtitle in material-ui Appbars?

Material-UI's AppBar provides a title property but no subtitle property. I want to add something in smaller text below the title, but I haven't been able to figure out a way to do it. Adding a
tag hides anything past that, and changing the display property of anything in that area to block also hides it. The only solution I've been able to find involves pretty severely mangling the component (basically ignoring the title property and hijacking the AppBar with a width 100% div, which isn't ideal). Has anyone found a better way to do this? Thanks!

Upvotes: 3

Views: 3921

Answers (2)

Jeff McCloud
Jeff McCloud

Reputation: 5927

You can put any HTML/components you want in the title prop. titleStyle can be used to tweak the outermost element (I use it below to override the "line-height: 64px" that AppBar adds to the outermost <div> by default):

https://jsfiddle.net/tktbsv63/1/

class Example extends React.Component {
  render() {
    return (
      <AppBar
        titleStyle={{ lineHeight: 'normal' }}
        title={
          <div>
            <div style={{ marginTop: 10 }}>Title of My App</div>
            <div style={{ fontSize: 'small', fontWeight: 300 }}>This is the subtitle</div>
          </div>
        }
      />
    );
  }
}

Upvotes: 7

Piotr O
Piotr O

Reputation: 429

You have to pass node with your title and subtitle as a title props of AppBar component and use titleStyle props to adjust CSS.

Second option - pass node as a children props

Upvotes: 1

Related Questions