自定义material-ui popover [重复]

Posted 2023-02-23

【中文标题】自定义material-ui popover [重复]

【英文标题】：Customize material-ui popover [duplicate]

【发布时间】：2018-10-07 23:56:42

【问题描述】：

我想给 material-ui popover 如下图所示的形状。

我使用 react 创建了 popover 工作演示并共享链接以进行编辑。有什么帮助吗？ => 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'));

【参考方案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;

【讨论】：

非常感谢。它工作正常。你能告诉我一件事，当我在 .popover_class 上应用 top: 50px 时，为什么它没有覆盖给定 top 的根元素的内联样式 42.0469px（通过检查元素发现）

popover 是一个带有 position: fixed 的组件，因此为了适合您的组件，它不能具有固定的 top 值。如果你给组件top: 50px 它总是会在同一个地方渲染。我猜material-ui 会根据您的组件的放置位置为您计算。

但即使我在 .popover_class 中给出 position: absolute 它仍然没有应用或覆盖。一定有什么因素不是吗？可以使用外部 css 覆盖这些东西吗？

谢谢我的回答。我忘了尝试 !important 的东西：P

当我使用模块 css 时如何做到这一点？？

【参考方案2】：

在样式 css 中添加 tyhis 样式。您只需调整一些边距和颜色。

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

【讨论】：

非常感谢。 @Andrea 我已经得到了答案:)

你能告诉我一件事，当我在 .popover_class 上应用 top: 50px 为什么它没有覆盖给定 top 42.0469px 的根元素的内联样式（通过检查元素发现)

可能是因为 style.css 是一个外部文件，在 css 层次结构中，它低于使用 material-ui 的内联 css（是 cssinjs，但它是相同的）。尝试这样做top: 50px !important; !important 很有用，因为它上升到层次结构

是的@Andrea你是对的。非常感谢。疑虑解除。我忘了试试那个东西。