어떻게

Question

에 대해 primaryText 및 secondaryText를 다르게 스타일 지정 하나의 소품 또는 다른 스타일에 스타일을 적용 할 수있는 기본 옵션이있는 것처럼 느껴졌지만 그렇게 할 수있는 문서에는 아무것도 표시되지 않습니다.

내가 사용할 수있는 style 소품이 있지만 전체 구성 요소에 스타일을 적용합니다. 또한 innerDivStyle 소품은 텍스트 자체의 하나 또는 다른 props/div가 아닌 둘러싸는 래퍼 div의 스타일 만 지정합니다.

<MenuItem className="foobar" style={{color:'red'}} innerDivStyle={{color:'blue'}} primaryText="My Primary text" secondaryText="My Secondary text" /> 

이 구성 요소는이에 렌더링 : 보이지 않는다

<div> 
    <span class="foobar" tabindex="0" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; position: relative; color: red; line-height: 48px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; min-height: 48px; white-space: nowrap; background: none;"> 
    <div> 
     <div style="margin-left: 0px; padding: 0px 16px; position: relative; color: blue;"> 
     <div style="float: right;">My Secondary Text</div> 
     <div>My Primary Text</div> 
     </div> 
    </div> 
    </span> 
</div> 

두 div의 구별 할 수있는 방법을 가지고. 당연히 div : first-child 나 something을 사용할 수도 있지만 근본적인 문제 나 분명히 빠진 것에 대한 해결 방법이 될 것 같아요.

재료 - UI 버전 : 0.16.0

그래서이 기술을 사용하는 문서에는 예를 없다하더라도

Answer 1

, 나는 primaryText 및 secondaryText 소품이 node 객체를 기대 것을 깨달았다. 이것은 거의 모든 예제에서 문자열 일 뿐이지 만 바로 위로 요소 일 수도 있습니다.

이렇게하면 별도의 받침대 스타일을 지정할 수 있습니다.

<MenuItem primaryText="My Primary Text" 
    secondaryText={<span style={{ color: 'blue' }}>My Secondary Text</span>} />