如何禁用 MUI 組件上的 select 框邊框

Question

我想在 onfocus 和 onblur 時禁用 select 框上的邊框並更改 label 文本的顏色我已經嘗試過但我無法禁用它

我在 Mui 組件定制方面不太體面

我們是我想要的形象

這是我取得的成就

這是代碼

<div>
  <FormControl sx={{ minWidth: 120, height: "1rem" }}>
    <Select
      value={age}
      onChange={handleChange}
      displayEmpty
      inputProps={{ "aria-label": "Without label" }}
      sx={{
        height: "1rem",
        borderRadius: 1,
        // border: ".2rem solid white",
        bgcolor: "#fffff",
        outline: "none",
        padding: "0rem",
        // fontSize: "4rem",
      }}
    >
      <MenuItem value="">Affiliation</MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>
</div>

這是 mui 新鮮組件

https://codesandbox.io/s/vjeqqb?file=/demo.js

誰能幫幫我，我想要關於圖片中的 output

提前謝謝

Answer 1

只需像下面這樣設置sx屬性：

<select
    ...
    sx={{ boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>
...
</select>