css - 'outlined' not working in Material UI Select

Question

I am implementing Material UI `Select' for which values are coming from backend. Below is my code

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

The problem with below code is that variant="outlined" is not getting applied. I am not able to see the outline/border which should be there as per the demo here https://codesandbox.io/s/material-demo-9jyoj What's wrong in my code?

标签： cssreactjsselectdrop-down-menumaterial-design

Answer 1

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

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