如何禁用 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>