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

Question

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!

Answer 1

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>
        }
      />
    );
  }
}

Answer 2

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