材质UI选择覆盖主题中的位置

Posted 2021-03-19

我想在主题中覆盖selectfield的下拉位置（不必在每次选择时实现它）。

我试过了。

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

下拉框的位置不能被覆盖。我也试着替换 select 由 selectMenu 但什么都没有发生...

当我直接传递到组件道具时，它可以工作。

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

我怎样才能实现在所有选择中覆盖这个道具？

对于信息，我正在使用。

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

先谢谢你

答案

该 覆盖键 是用来覆盖样式的。你应该使用 道具钥匙 用于主题中的默认道具。

下面是正确的语法。

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

相关回答： 是否可以覆盖 material-ui 组件的默认道具？