如何修复菜单材质的阴影-UI

Question

当我使用一些图标菜单时，框阴影看起来很暗。如何解决？ 1：

Codesandbox示例https://codesandbox.io/embed/flamboyant-tdd-r83u1

   <div>
      {items.map((item, index) => {
        return (
          <Fragment key={index}>
            <IconButton
              aria-owns={open ? "long-menu" : undefined}
              onClick={this.handleClick}
            >
              <MoreVertIcon />
            </IconButton>
            <Menu anchorEl={anchorEl} open={open} onClose={this.handleClose}>
              {options.map(option => (
                <MenuItem key={option} onClick={this.handleClose}>
                  {option}
                </MenuItem>
              ))}
            </Menu>
          </Fragment>
        );
      })}
    </div>

Answer 1

因为，实际上您正在同时触发具有相同标志的多个菜单。因此阴影很暗，因为一个接一个地存在多个菜单。

Answer 2

下面的代码可以解决此问题，您不必在项目循环中呈现菜单

  render() {
    const items = [...Array(10).keys()];
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div>
        {items.map((item, index) => {
          return (
            <Fragment key={index}>
              <IconButton
                aria-owns={open ? "long-menu" : undefined}
                onClick={this.handleClick}
              >
                <MoreVertIcon />
              </IconButton>

            </Fragment>
          );
        })}


        <Menu anchorEl={anchorEl} open={open} onClose={this.handleClose}>
          {options.map(option => (
            <MenuItem key={option} onClick={this.handleClose}>
              {option}
            </MenuItem>
          ))}
        </Menu>
      </div>
    );
  }