6

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

enter image description here

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'));
Subhojit
  • 1,389
  • 8
  • 19
  • 33

2 Answers2

6

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;
}
Alberto
  • 1,348
  • 2
  • 14
  • 28
  • Thanks a lot. It's working fine. Can you tell me one more thing that when I'm applying **top: 50px** on **.popover_class** why it is not overriding the inline styles of the root element where top is given **42.0469px** (discovered by inspecting element) – Subhojit Apr 27 '18 at 07:35
  • `popover` is a component with `position: fixed` so in order to fit right under your component it cannot have a fixed `top` value. If you give the component `top: 50px` it will always render in the same place. I guess the `material-ui` calculates this for you depending where your component is placed. – Alberto Apr 27 '18 at 07:48
  • But even if I give **position: absolute** in **.popover_class** it's still not applying or overriding. There must be some factor there isn't it ? can the things be overriden using external css? – Subhojit Apr 27 '18 at 07:55
  • Thanks I got my answer. I forgot to try **!important** thing :P – Subhojit Apr 27 '18 at 08:00
  • How to do that when I am using module css ?? – Himanshu Tariyal Dec 04 '20 at 13: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;
}
benn98
  • 125
  • 11
  • Thanks a lot. @Andrea I already got the answer though :) – Subhojit Apr 27 '18 at 07:42
  • Can you tell me one more thing that when I'm applying top: 50px on .popover_class why it is not overriding the inline styles of the root element where top is given 42.0469px (discovered by inspecting element) – Subhojit Apr 27 '18 at 07:44
  • 1
    probably beacuse style.css is an external file and in the css hierarchy it's lower tha inline css(is cssinjs but it's the same) that uses material-ui. Try to do this `top: 50px !important;` !important is useful beacuse it goes up to the hierarchy – benn98 Apr 27 '18 at 07:47
  • yeah @Andrea you're right. Thanks alot. Doubts cleared. I forgot to try that thing. – Subhojit Apr 27 '18 at 07:59