Можно ли добавить субтитры в material-ui Appbars?

Question

В AppBar Material-UI есть свойство title, но без свойства субтитров. Я хочу добавить что-то в меньший текст под заголовком, но я не смог найти способ сделать это. Добавление тега
скрывает все, что прошло, и изменение свойства отображения чего-либо в этой области для блокировки также скрывает его. Единственное решение, которое я смог найти, включает в себя довольно жестокое обращение с компонентом (в основном игнорируя свойство title и угон AppBar с шириной 100% div, что не идеально). Кто-нибудь нашел лучший способ сделать это? Благодаря!

Answer 1

Вы можете поместить любой HTML/компоненты, которые вы хотите в title опору. titleStyle может быть использован для настройки внешнего элемента (я использую его ниже, чтобы перекрыть «высоту строки: 64px», что 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 реквизита