material-ui Appbars에 자막을 추가 할 수 있습니까?

Question

Material-UI의 AppBar는 title 속성을 제공하지만 자막 속성은 제공하지 않습니다. 제목 아래에 작은 텍스트로 무언가를 추가하고 싶지만 그 방법을 찾지 못했습니다.
태그를 추가하면 그 이상의 모든 것이 숨겨지고 해당 영역의 모든 항목의 표시 속성을 변경하여 차단하면 숨길 수도 있습니다. 내가 찾은 유일한 해결책은 구성 요소를 심하게 맹 글링하는 것입니다 (기본적으로 제목 속성을 무시하고 너비가 100 % div 인 AppBar를 하이재킹하는 것은 이상적이지 않습니다). 누구든지이 일을하는 더 좋은 방법을 찾았습니까? 감사!

Answer 1

당신은 title 소품에 원하는 HTML/구성 요소를 넣을 수 node를 전달합니다.

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

당신은 AppBar 구성 요소의 title 소품으로 제목과 자막으로 node을 전달하고 CSS를 조정 titleStyle 소품을 사용해야합니다.

두 번째 옵션 - children 소품