reactjs - Material UI 选择覆盖主题中的位置

Question

我想覆盖主题中选择字段下拉列表的位置(不必在每个选择上实现它)。

我已经尝试过:

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

下拉菜单的位置未被覆盖。我还尝试用 selectMenu 替换 select 但没有任何反应...

当我直接传递给 compnent Prop 时，它正在工作:

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

如何为所有选择实现覆盖此 Prop ？

有关我正在使用的信息:

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

提前致谢

Answer 1

overrides key用于覆盖样式。您应该使用 props key用于默认主题中的 Prop 。

正确的语法如下:

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

相关答案:Is it possible to override material-ui components default props?