どうやって<MenuItem />

Question

のためにprimaryTextとsecondaryTextをスタイル付けするかスタイリングを1つの小道具に適用するためのいくつかのデフォルトオプションがあるように感じますが、私はそれを可能にするドキュメントには何も表示されません。

使用できるstyle小道具がありますが、それはコンポーネント全体にスタイルを適用します。また、innerDivStyle propは、テキスト自体の1つまたは他のprops/divではなく、囲むラッパーdivのスタイルを設定します。

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

このコンポーネントは、これにレンダリング：2つのdivを区別するためにどのような方法を持っていないようです

<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：first-childや何かを使うこともできますが、根本的な問題や明らかに欠けていることの回避策になると思います。

材質-UIのバージョン：0.16.0

Answer 1

だから、何の例では、この技術を使用してドキュメントにありませんにもかかわらず、私はprimaryTextとsecondaryText小道具がnodeオブジェクトを期待していることに気づきました。これは、ほとんどすべての例で通常は文字列ですが、まっすぐな要素にすることもできます。

これは、別の小道具のスタイルを設定する方法です。

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