删除 MUI 选择组件的边框后单击它 - React JS

Question

我想在点击Select后从MUI中删除它的边框，但我找不到合适的CSS来覆盖它单击组件后，我设法删除了默认的组件，但没有删除蓝色的组件，如此沙盒中所示(https://codesandbox.io/s/autumn-bash-zgy4km?file=/demo.tsx)

我想删除的带有蓝色边框的图像-在我点击选择后出现

Answer 1

您可以像这样删除

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

这是正在工作的代码沙盒