Customize material-ui popover [duplicate]

问题

I want to give the material-ui popover this following shape shown in the image.

I have created the popover working Demo using react and shared the link for editing purpose. Any help ? => Working Demo

I'm Sharing the code here also but it would be good if the stackblitz working demo would be in use for editing purpose:

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'));

回答1:

Try adding this to your css file

.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;
}

回答2:

add tyhis style in style css. You have only to adjust some margin and colors.

.popover_class:after {
content:"";
position: absolute;
right: 4px;
top: -5px;
width: 0;`
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent green transparent;
z-index:9998;
}

来源：https://stackoverflow.com/questions/50057293/customize-material-ui-popover

标签

javascript

reactjs

material-ui

css-shapes

react-component