Question

Material-UI的AppBar提供了title属性但没有字幕属性。我想在标题下面添加一些较小的文字，但我还没有找到办法。添加一个标签会隐藏任何超过该标签的内容，并且更改该区域中任何内容的显示属性也会隐藏它。我能找到的唯一解决方案是严重破坏组件（基本上忽略了title属性并用宽度100％div劫持AppBar，这并不理想）。有没有人找到更好的方法来做到这一点？谢谢！

Answer 1

您可以在title道具中添加所需的任何HTML /组件。 titleStyle可用于调整最外层元素（我在下面使用它来覆盖＆＃34;行高：64px＆＃34;默认情况下AppBar添加到最外层<div> ）：

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

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

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

是否可以在材料中添加字幕-ui Appbars？

2 个答案: