Material UI Select override Position in theme

问题

I want to override position of dropdown of selectfield in the theme (to not have to implement it on each select).

I have try:

createMuiTheme({
  overrides: {
    MuiSelect: {
      select:{
        MenuProps: {
          getContentAnchorEl: null,
            anchorOrigin: {
              vertical: "bottom",
                horizontal: "left",
            }
          }
        }
      }
    }
  }
});

Position of dropdown is not override. I also try to replace select by selectMenu but nothing happen...

When I pass directly to compnent props, it's working:

<Select
  ...otherProperties, 
  MenuProps={{
    getContentAnchorEl: null,
    anchorOrigin: {
      vertical: "bottom",
      horizontal: "left",
    }
  }}
>
  ...childs
</Select>

How can I achived override this props for all select?

For informmation I am using:

"react": "^16.12.0",
"@material-ui/core": "^4.9.10", 
"typescript": "3.6.3",

Thanks in advance

回答1:

The overrides key is for overriding styles. You should use the props key for defaulting props in the theme.

Here's the correct syntax:

const theme = createMuiTheme({
  props: {
    MuiSelect: {
      MenuProps: {
        getContentAnchorEl: null,
        anchorOrigin: {
          vertical: "bottom",
          horizontal: "left"
        }
      }
    }
  }
});

Related answer: Is it possible to override material-ui components default props?

来源：https://stackoverflow.com/questions/61370798/material-ui-select-override-position-in-theme