“概述”在材质 UI 选择中不起作用答案

【问题标题】：'outlined' not working in Material UI Select“概述”在材质 UI 选择中不起作用
【发布时间】：2020-04-03 04:57:42
【问题描述】：

我正在实现来自后端的值的 Material UI `Select'。下面是我的代码

<FormControl variant="outlined" className={classes.formControl}>
  <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label" htmlFor="outlined-Name">
                                    Name
  </InputLabel>
  <Select
    value={Name}
    onChange={handleChange}
    labelWidth={labelWidth}
    inputProps={{
      name: 'Name',
      id: 'outlined-Name',
   }}
>
 <MenuItem value="1" className={classes.menuItm}>All</MenuItem>
   {
     NameArr.data.map(Name => (
     <MenuItem value={Name.name} className={classes.menuItm}>{Name.name}</MenuItem>
 ))
   }
</Select>      
</FormControl>

下面代码的问题是variant="outlined" 没有被应用。我看不到这里的演示应该有的轮廓/边框https://codesandbox.io/s/material-demo-9jyoj 我的代码有什么问题？

【问题讨论】：

我不赞成我使用 Angular 的反应，但从你的代码看来，你在错误的地方使用了 variant="outlined"，而应该在 <TextField 上，正如他们的文档 material-ui.com/components/text-fields 中提到的那样。在<FormControl 上使用它并没有设置样式，因为它跳过了样式层次结构
您的代码没问题，已应用概述。 codesandbox.io/s/…

标签： css reactjs select drop-down-menu material-design

【解决方案1】：

您需要更新@material-ui/core 包。在当前版本 (4.9.1) 中，outlined 被正确传递给 <FormControl> 子代。

就我个人而言，从4.1.0 到4.9.1 的更新解决了这个问题。

【讨论】：

【解决方案2】：

你应该像这样应用大纲变体来选择：

<FormControl className={classes.formControl}>
  <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label" htmlFor="outlined-Name">
                                    Name
  </InputLabel>
  <Select
    value={Name}
    variant="outlined"    {/*  -------------> here is what you looking for */}
    onChange={handleChange}
    labelWidth={labelWidth}
    inputProps={{
      name: 'Name',
      id: 'outlined-Name',
   }}
>
 {NameArr.data.map(Name => (
     <MenuItem value={Name.name} className={classes.menuItm}>{Name.name}} 
     </MenuItem>
  )}
</Select>      
</FormControl>

【讨论】：