javascript - 自定义material-ui弹出窗口

Question

这个问题已经有答案了:

Speech bubble with arrow (3 个回答)

已关闭 5 年前。

我想为 Material-ui 弹出框提供如图所示的以下形状。

我已经使用 React 创建了弹出窗口工作演示，并共享了用于编辑目的的链接。有什么帮助吗？ =>Working Demo

我也在此处共享代码，但如果将 stackblitz 工作演示用于编辑目的，那就太好了:

import React, { Component } from 'react';
import Popover, {PopoverAnimationVertical} from 'material-ui/Popover';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const PopoverStyle = {
    top: '50px'
};

class App extends Component {

  constructor(props) {
        super(props);
        this.state = { pop_open: false };
    }

  handleProfileDropDown(e) {
        e.preventDefault();
        this.setState({
            pop_open: !this.state.pop_open,
            anchorEl: e.currentTarget,
        });
    }

    handleRequestClose() {
        this.setState({
            pop_open: false,
        });
    };

  render() {
    return (
      <div>
      <MuiThemeProvider>
        <button type="submit" name={this.state.name} onClick={this.handleProfileDropDown.bind(this)} >My Customized PopOver</button>
        <Popover
                      open={this.state.pop_open}
                      anchorEl={this.state.anchorEl}
                      className="popover_class"
                      style={PopoverStyle}
                      anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
                      targetOrigin={{horizontal: 'left', vertical: 'top'}}
                      onRequestClose={this.handleRequestClose.bind(this)}
                      animation={PopoverAnimationVertical}
                    >
                      <Menu>
                        <MenuItem primaryText="Content" />
                        <MenuItem primaryText="My Profile" />
                        <MenuItem primaryText="Settings" />
                        <MenuItem primaryText="Logout" />
                      </Menu>
                    </Popover>
            </MuiThemeProvider>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

尝试将其添加到您的 css 文件

.popover_class{
  margin-top: 10px;
  border: 1px solid black;
}
.popover_class::before{
  content: '';
  position: absolute;
  top: -20px;
  right: 5px;
  border-bottom: 10px solid black;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  z-index: 10;
}