javascript 自定义材质-ui popover
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50057293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customize material-ui popover
提问by Subhojit
I want to give the material-ui popover this following shape shown in the image.
我想为 material-ui popover 提供如下图所示的形状。
I have created the popover working Demo using react and shared the link for editing purpose. Any help ? => Working Demo
我已经使用 react 创建了 popover 工作演示并共享了链接以进行编辑。有什么帮助吗？=>工作演示
I'm Sharing the code here also but it would be good if the stackblitz working demo would be in use for editing purpose:
我也在此处共享代码，但如果将 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'));
采纳答案by Alberto
Try adding this to your cssfile
尝试将此添加到您的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;
}
回答by benn98
add tyhis style in style css. You have only to adjust some margin and colors.
在样式 css 中添加 tyhi 样式。您只需要调整一些边距和颜色。
.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;
}
