将 className 属性传递给 Material-ui 子/内部元素答案

【问题标题】：Passing className prop to Material-ui child/inner elements将 className 属性传递给 Material-ui 子/内部元素
【发布时间】：2017-01-04 21:52:10
【问题描述】：

是否可以将 css 类分配给 Material-UI 组件的内部元素。以<RaisedButton /> 组件为例，假设我想将className 应用于Raised Button 中的标签元素。

<RaisedButton labelStyle={{...}}。

既然labelStyle 正在寻找一个对象，我将如何应用自定义css 类而不是添加内联代码？

【问题讨论】：

【解决方案1】：

与另一个答案类似，但您可以将 <span> 元素作为 label 属性而不是作为子元素传递：

<RaisedButton label={<span className="your-class">Your label</span>} />

这会保留RaisedButton 应用的内联样式/主题。

【讨论】：

谢谢杰夫！您的回答提醒我，很久以前我在 AppBar 组件中使用另一个文件中的 iconElementLeft/Right 道具做到了这一点。我想我的大脑只是拒绝在不同的环境中提供这种联系。

【解决方案2】：

认为您可以将标签作为孩子而不是在道具中传递。

<RaisedButton>
  <span className="your-class">Your label</span>
</RaisedButton>

RaisedButton 的 className 属性仅适用于根元素。

【讨论】：

虽然可行，但不会有 material-ui 提供的标签样式。我想我应该更具体一点，我希望能够在使用类而不是内联添加/覆盖样式时保留这些样式。关于最后一行，您是说没有办法将该道具传递给子元素？
Tom 的答案是正确的，但是你也可以使用 label 属性... Your label} /> .. .如果您想在应用 css 类之前利用 RaisedButton 应用的主题/样式（例如，它应用的“字体大小”和“文本转换”）。实际上，您可能不希望将这些内置样式应用于您的 css 类 - 如果不是，请按照 Tom 的建议将 span 作为子项。