如何禁用MUI组件上的选择框边框

Question

我想禁用选择框上的边框并更改标签文本的颜色 当 onfocus 和 onblur 时 我已经尝试过，但无法禁用它

我对 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

有人可以帮我吗 我希望输出在大约图像中准确无误

提前谢谢

Answer 1

只需设置

sx

属性，如下所示：

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

Answer 2

您需要定位 sx 属性。

sx={{
    '& label': {
        color: 'red', 
        '&.Mui-focused': {
            color: 'red', 
        },
    },
    '& .MuiOutlinedInput-root': {
        '& fieldset': {
            borderColor: 'transparent', 
        },
        '& .MuiInputLabel-root': {
            '&.Mui-focused': {
                color: 'red', 
            },
        },
    },
    '& .MuiSelect-root': {
        color: 'red', 
        '&:focus': {
            color: 'red', 
        },
    },
    '& .MuiSelect-icon': {
        color: 'red', 
    },
}}