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