Global style override for MUI Select

Question

I'm trying to style a select component in a react project using MUI 5, specifically, I'm trying to change the border size and color when the select component is focused. Other components can be globally styled just fine using styleOverrides followed by root but select doesn't seem to have the root attribute. Tried changing the select component into a textfield component with the select prop and that seemed to work but I was wondering if there's a way to style select without changing them into textfield .

This is the code snippet that I use for my textfield global style overrides:

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

Answer 1

This is how I could change the style for the focus state for the Select component using the theme.

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

Hope it helped, thanks.

Answer 2

This isn't documented anywhere, but 'root' appears to still work. Even though it's not available through the type system.

You could try:

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