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或者其他东西，但我觉得这将是一个基本问题的解决方法，或者我明显遗漏的东西。

Material-UI版本：0.16.0

Answer 1

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

这就是你如何设计一个单独的道具。

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

如何为<menuitem>设置不同的primaryText和secondaryText样式

1 个答案: