如何去除Material UI Select组件的边框？

Question

我想自定义Material UISelect组件。基本上我只是想删除边框或更确切地说是轮廓。我尝试覆盖样式，尝试使用 aNativeSelect并尝试使用自定义的as InputBaseinputComponent但这些都不起作用。任何帮助将非常感激。Select

Answer 1

我遵循@Bar的回答：就我而言，我还必须重置box-shadow在Select.

对于材质 v5，

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

Answer 2

MUIdisableUnderline在Select组件中公开了 prop。只需将其设置为true

Answer 3

我遵循了 @cmolina 的答案，但当选择聚焦时仍然得到一些边框。

对于 Material v5，这对我有用

<Select sx={{
                boxShadow: "none",
                ".MuiOutlinedInput-notchedOutline": { border: 0 },
                "&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
                  {
                    border: 0,
                  },
                "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
                  {
                    border: 0,
                  },
              }}
            >
    

Answer 4

边框应用于OutlinedInput组件的标签。notchedOutline编辑组件的css规则OutlinedInput以删除边框。https://mui.com/api/outlined-input/#css

Answer 5

对我有用的是使用

• disableUnderline删除选择器下方的行
• variant="standard"摆脱边框，无论选择器是否聚焦。

设置'.MuiOutlinedInput-notchedOutline': { border: 0 }只会在未获得焦点时删除选择器的边框。