是否可以在 material-ui 应用栏中添加字幕？

Question

Material-UI 的 AppBar 提供了标题属性但没有副标题属性。我想在标题下方用较小的文本添加一些内容，但我一直无法找到一种方法来做到这一点。添加
标签会隐藏超过该区域的所有内容，更改该区域中任何内容的显示属性以阻止也会隐藏它。我能够找到的唯一解决方案涉及非常严重地破坏组件（基本上忽略标题属性并劫持宽度为 100% div 的 AppBar，这并不理想）。有没有人找到更好的方法来做到这一点？谢谢！

Answer 1

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

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

Answer 2

您可以在 title 道具中放置任何您想要的 HTML/components。 titleStyle 可用于调整最外层元素（我在下面使用它来覆盖 AppBar 默认添加到最外层 <div> 的 "line-height: 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>
        }
      />
    );
  }
}

是否可以在 material-ui 应用栏中添加字幕？

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

appbar

reactjs

material-ui