时间戳

首页 > 解决方案 > Material UI (React)：如何设置包装 Select 的 Input 样式？

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

问题描述

我有以下 JSX：

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

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

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

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

我知道我可以向 中添加一个类名FormControl，然后使用外部样式表对其进行样式设置，但我想在组件级别对其进行样式设置。

有任何想法吗？

编辑：

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

<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>

标签： reactjsmaterial-ui

解决方案

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

推荐阅读