材质UI选择替代主题中的位置

材质UI选择替代主题中的位置

本文介绍了材质UI选择替代主题中的位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我试过了:

  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选择替代主题中的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-13 04:13