''outlined' not working in Material UI Select

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


Solution 1:[1]

You need to update @material-ui/core package. In the current version (4.9.1) outlined is passed properly to the <FormControl> children.

For me personally an update from 4.1.0 to 4.9.1 fixed this issue.

Solution 2:[2]

you should apply outline variant to select like so :

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 meandre
Solution 2 Amir Rezvani

Related Questions