點擊后移除 MUI Select 組件的邊框 - React JS

Question

我想在單擊它后從 MUI 中刪除 Select 上的邊框，但我找不到合適的 CSS 來覆蓋我設法刪除了默認的邊框，但在單擊組件后沒有刪除藍色的邊框，如此沙箱中所示（ https://codesandbox.io/s/autumn-bash-zgy4km?file=/demo.tsx ）

我要刪除的帶有藍色邊框的圖像 - 單擊 Select 后出現

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

這是工作代碼和框