材质用户界面（反应式）：如何为包装选择内容的输入设置样式？

Question

我有以下JSX：

<FormControl>
  <InputLabel>My label</InputLabel>
  <Select>
    ...
  </Select>
</FormControl>

我使用classes道具为FormControl和Select的各个方面设置样式。问题在于Select组件用Input组件隐式包装，因此实际上看起来像这样：

<FormControl>
  <InputLabel>My label</InputLabel>
  <Input>
    <Select>
      ...
    </Select>
  </Input>
</FormControl>

这就是我遇到的问题：如何设置包裹Input的{​​{1}}的样式？我已经看过Select和Select的CSS API，但它们都不允许您设置FormControl的样式。

我知道我可以将className添加到Input，然后使用外部样式表对其进行样式设置，但是我想在组件级别对其进行样式设置。

有什么想法吗？

编辑：

我的代码段（带有虚拟内容），用于说明（要求）：

FormControl

Answer 1

您可以通过标准的css导入（查看生成代码并检索css路径）来完成此操作，也可以使用包装器对其进行样式设置，并使用样式化组件对其进行样式设置。包含真实案例的摘要对我来说更有用。

Answer 2

好的，我找到了解决方法。

要设置包装Input组件的样式，您需要在Select的{​​{1}}道具中明确定义它，然后将input道具传递给该{{ 1}}。

这里是一个例子：

classes