How to remove React MUI Select component frame

Question

I struggle with removing the frame around the <Select> component from React Material UI library. In the picture below, when the <Select> component is unselected, there is a black border/frame around it.

The code for the described component is:

<Box sx={{
                minWidth: 60,
            }}>
                <Select
                    value={this.state.lang}
                    onChange={this.handleChange}
                    sx={{
                        outline: 0,
                        border: 0,
                        boxShadow: 'none',
                        color: '#fff',
                    }}

                >
                    <MenuItem value={'en'}>EN</MenuItem>
                    <MenuItem value={'de'}>DE</MenuItem>
                </Select>
            </Box>

Any clue, what do I miss? I'd rather omit the solution where I have to style my entire <Select/> .

Thank you all in advance.

Answer 1

The border is on the fieldset tag. Set it to 'none'

<Select
  ...
  sx={{ '& > fieldset': { border: 'none' } }}
>
  <MenuItem value={'en'}>EN</MenuItem>
  <MenuItem value={'de'}>DE</MenuItem>
</Select>

Answer 2

You can manage it by variant prop. The default value of it is outlined but there are two other option filled and standard . Both of last options has no outline but bottom margin which you can manage by sx or css class. so add variant="filled" or variant="standard" to fix it.