CODEWITHSUNDEEP
cssreactjsreact-nativematerial-ui
michal.kyjovsky
michal.kyjovsky

Reputation: 99

How to remove React MUI Select component frame

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.

Language Select

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.

Upvotes: 2

Views: 2270

Answers (2)

Aleksandar Hristov
Aleksandar Hristov

Reputation: 618

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>

Upvotes: 2

khajehmiri
khajehmiri

Reputation: 11

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.

Upvotes: 0

Related Questions