材质UI选择替代主题中的位置 [英] Material UI Select override Position in theme

问题描述

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

我试过了:

  createMuiTheme({覆盖:{MuiSelect:{选择:{菜单道具:{getContentAnchorEl:null，锚点来源:{垂直:底部"，水平:左"，}}}}}}}); 

下拉列表的位置不被覆盖.我还尝试将 select 替换为 selectMenu ，但是什么也没发生...

当我直接传递到道具时，它就起作用了:

 <选择...其他属性，MenuProps = {{getContentAnchorEl:null，anchorOrigin:{垂直:底部"，水平:左"，}}}>...孩子</选择> 

我如何才能为所有选择覆盖此道具?

有关信息，我正在使用:

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

预先感谢

解决方案

相关答案:是否已可能会覆盖material-ui组件的默认道具吗?

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

解决方案

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?

这篇关于材质UI选择替代主题中的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！