I want to remove the border on Select from MUI after I click on it and I can't find the proper CSS to overwrite I managed to remove the default one, but not the blue one after I click the component, as shown in this sandbox (https://codesandbox.io/s/autumn-bash-zgy4km?file=/demo.tsx)
Image with the blue border I want to remove - appears after I click on Select
You can remove it like this
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
sx={{
borderRadius: 0,
"& .MuiOutlinedInput-notchedOutline": {
border: 0
},
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: "none"
}
}}
>
Here is the working codesandbox