如何以不同的方式为 <菜单项 />设置主要文本和辅助文本的样式

Question

我觉得会有一些默认选项将样式应用于一个道具或另一个道具，但我在文档中没有看到任何允许我这样做的内容。

我可以使用一个style道具，但它将样式应用于整个组件。此外，innerDivStyle道具仅设置封闭包装器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 或其他东西，但我觉得这将是解决基本问题或我明显缺少的东西的解决方法。

材质用户界面版本：0.16.0

Answer 1

因此，即使文档中没有使用这种技术的示例，我也意识到primaryText和secondaryText道具需要一个node对象。这在几乎每个示例中通常只是一个字符串，但它也可以只是一个直接的元素。

这就是您可以设置单独道具样式的方式。

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

Answer 2

不再推荐内联 css，使用同构样式加载器从单独的文件中嵌入 css。检查 ： https://www.npmjs.com/package/isomorphic-style-loader