点击后移除 MUI Select 组件的边框 - React JS

Question

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

Answer 1

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