是否可以在material-ui Appbars中添加字幕？答案

【问题标题】：Is it possible to add a subtitle in material-ui Appbars?是否可以在material-ui Appbars中添加字幕？
【发布时间】：2017-05-14 08:11:26
【问题描述】：

Material-UI 的 AppBar 提供了 title 属性，但没有 subtitle 属性。我想在标题下方以较小的文字添加一些内容，但我无法找到一种方法来做到这一点。添加
标记会隐藏除此之外的任何内容，并将该区域中任何内容的 display 属性更改为 block 也会隐藏它。我能找到的唯一解决方案是严重破坏组件（基本上忽略了 title 属性并劫持了宽度为 100% div 的 AppBar，这并不理想）。有没有人找到更好的方法来做到这一点？谢谢！

【问题讨论】：

标签： reactjs material-ui appbar

【解决方案1】：

您可以在title 属性中放置您想要的任何 HTML/组件。 titleStyle 可用于调整最外层元素（我在下面使用它来覆盖 AppBar 默认添加到最外层 <div> 的“行高：64px”）：

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

【讨论】：

titleStyle={{ lineHeight: 'normal' }} 是我所缺少的。现在完美运行。谢谢！

【解决方案2】：

您必须将带有标题和副标题的node 作为AppBar 组件的title 属性传递，并使用titleStyle 属性来调整CSS。

第二个选项 - 将 node 作为 children 道具传递

【讨论】：