如何去掉MUI select組件的邊框？

Question

我想自定義MUI Select組件。 基本上我只想刪除邊框或更確切地說是輪廓。 我試圖覆蓋styles，嘗試使用NativeSelect並嘗試將自定義的InputBase與Select用作inputComponent ，但這些都不起作用。 任何幫助將非常感激。

Answer 1

邊框應用於OutlinedInput組件的標簽。 編輯OutlinedInput組件的 css 規則notchedOutline以移除邊框。 https://mui.com/api/outlined-input/#css

Answer 2

MUI 在Select組件中公開了disableUnderline屬性。 只需將其設置為true

Answer 3

我遵循@Bar的回答：在我的情況下，我還必須重置應用於Select的box-shadow 。

對於材料 v5，

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

Answer 4

對我有用的是使用

• disableUnderline刪除選擇器下方的行
• variant="standard"去除邊框，無論選擇器是否聚焦。

設置'.MuiOutlinedInput-notchedOutline': { border: 0 }只會在未聚焦時移除選擇器的邊框。