css “outlined”在Material UI Select中不起作用

n6lpvg4x  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(141)

我正在实现材质UI '选择',其值来自后端。下面是我的代码

<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我的代码中有什么问题?

anauzrmj

anauzrmj1#

您需要更新@material-ui/core包。在当前版本(4.9.1)中,outlined正确传递给<FormControl>子级。
对我个人来说,从4.1.04.9.1的更新解决了这个问题。

bq9c1y66

bq9c1y662#

你应该像这样应用大纲变量来选择:

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

相关问题