MUI 的全局样式覆盖 Select

Question

我正在尝试使用 MUI 5 在 React 项目中设置select组件的样式，具体来说，我正在尝试在聚焦select组件时更改边框大小和颜色。 其他组件可以使用 styleOverrides 后跟 root 进行全局样式设置，但select似乎没有 root 属性。 尝试将select组件更改为带有 select 道具的textfield组件，这似乎有效，但我想知道是否有一种方法可以在不将其更改为textfield字段的情况下设置select的样式。

这是我用于textfield全局样式覆盖的代码片段：

export const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root.Mui-focused fieldset': { border: '3px solid #A6CBF3'},
       },
     },
   },
})

Answer 1

这就是我如何使用主题更改Select组件的焦点 state 的样式的方法。

export const theme = createTheme({
      components: {
        MuiSelect: {
          styleOverrides: {
            select: {
              ":focus": {
                backgroundColor: "green", // Just for the demo
                border: '3px solid #A6CBF3',
              },
            },
    
          }
        },
    })

希望对您有所帮助，谢谢。

Answer 2

这在任何地方都没有记录，但'root'似乎仍然有效。 即使它不能通过类型系统使用。

你可以试试：

export const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        ...{'root': {
          outline: '1px red solid'
        }}
      }
    }
  }
})