Material UI (React)：如何设置包装 Select 的 Input 样式？答案

【问题标题】：Material UI (React): how to style the Input wrapping the Select?Material UI (React)：如何设置包装 Select 的 Input 样式？
【发布时间】：2018-08-07 01:42:56
【问题描述】：

我有以下 JSX：

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

我使用classes 属性来设置FormControl 和Select 的各个方面的样式。问题是Select 组件隐式地用Input 组件包装自己，因此实际上看起来像这样：

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

这就是我遇到问题的地方：如何设置包装 Select 的 Input 样式？我查看了 Select 和 FormControl 的 CSS API，但它们都不允许您设置 Input 的样式。

我知道我可以将 className 添加到 FormControl，然后使用外部样式表设置它的样式，但我想在组件级别设置它的样式。

有什么想法吗？

编辑：

我的代码的 sn-p（带有虚拟内容），用于说明（已请求）：

<FormControl
  classes={myClasses.formControl}
  >
  <InputLabel
    htmlFor='country'
    classes={myClasses.inputLabel}
  >
    Select country
  </InputLabel>
  <Select
    value={countryCode}
    onChange={onInputChange}
    inputProps={{
      name: 'countryCode',
      id: 'country',
    }}
    classes={myClasses.select}
  >
    <MenuItem value='US'>United States</MenuItem>
    <MenuItem value='GB'>United Kingdom</MenuItem>
    <MenuItem value='FR'>France</MenuItem>
  </Select>
</FormControl>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以通过标准的 css 导入来实现（查看生成代码并检索 css 路径），或者您可以使用包装器对其进行样式设置并使用样式组件对其进行样式设置。一个带有真实案例的 sn-p 对我来说更具体会很有用。

【讨论】：

我不认为你可以用 Material ui 做到这一点。原因是它会自动生成类名，因此它们不是确定性的。您可以覆盖此行为，但不建议这样做。可悲的是，React material-ui 也缺少大量可配置的 CSS 端点 :(.
谢谢 Mosé，我知道我可以通过 CSS 导入来做到这一点，但这就是我想要避免的。我添加了一个 sn-p - 希望它有所帮助。关于样式组件。能举个例子吗？

【解决方案2】：

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

要设置包装Input 组件的样式，您需要在Select 的input 属性中显式定义它，然后将classes 属性传递给Input。

这是一个例子：

<Select
  input={
    <Input
      classes={myClasses.input}
    />
  }
>
  ...
</Select>

【讨论】：