javascript - MUI Select 的全局样式覆盖

Question

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

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

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

Answer 1

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

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

希望对你有帮助，谢谢。