如何使用 JSS 设置 Material-UI 菜单弹出框的样式？

Posted 2023-02-22

【中文标题】如何使用 JSS 设置 Material-UI 菜单弹出框的样式？

【英文标题】：How do I style the Material-UI Menu Popover with JSS?

【发布时间】：2019-03-16 02:06:24

【问题描述】：

我这里有一个代码沙箱：https://codesandbox.io/s/0qv1jwlmlv

我正在做的事情非常简单：

class SimpleMenu extends React.Component 
  state = 
    anchorEl: null
  ;

  handleClick = event => 
    this.setState( anchorEl: event.currentTarget );
  ;

  handleClose = () => 
    this.setState( anchorEl: null );
  ;

  render() 
    const  anchorEl  = this.state;
    const  classes  = this.props;
    return (
      <AppBar className=classes.root>
        <Toolbar>
          <Button
            variant="contained"
            color="secondary"
            aria-owns=anchorEl ? "simple-menu" : null
            aria-haspopup="true"
            onClick=this.handleClick
          >
            Open Menu
          </Button>
          <Menu
            id="simple-menu"
            anchorEl=anchorEl
            open=Boolean(anchorEl)
            onClose=this.handleClose
            PopoverClasses=
              paper: classes.menu
            
          >
            <MenuItem onClick=this.handleClose>Profile</MenuItem>
            <MenuItem onClick=this.handleClose>My account</MenuItem>
            <MenuItem onClick=this.handleClose>Logout</MenuItem>
          </Menu>
        </Toolbar>
      </AppBar>
    );
  


const styles = 
  root: 
    height: 100
  ,
  menu: 
    position: "relative",
    top: 100
  
;
export default withStyles(styles)(SimpleMenu);

这里，我的导航栏是固定高度的，当你按下菜单按钮时，我希望菜单按钮在导航栏下方打开。

为此 - 我已向菜单弹出框添加了相关样式，并将此样式应用于弹出框纸张 - 但材料应用于弹出框的内联样式接管并且不起作用。

我该如何设计这个样式？

【问题讨论】：

啊，好的，我在示例中看到了使用Grow 组件的演示。我现在将继续发布答案。

这是一个工作示例：codesandbox.io/s/0xx1zp57np，但老实说，我 cbf 现在正在写下解决方案的完整答案。这是相当复杂的imo。

如果有人感兴趣，这里是我写的一篇关于我创建的抽象菜单按钮组件的帖子codereview.stackexchange.com/questions/205359/…

【参考方案1】：

反正一年过去了。以这种方式使用 PaperProps 添加样式。

这里是link

PaperProps=
 style: 
  marginTop: "40px"