如何覆盖Material-UI Popover样式？

Question

如何覆盖max-height组件的Popover属性的默认值？

我试图添加style={{'maxHeight': '365px'}}，但没有任何改变：

<Popover
  style={{'maxHeight': '365px'}}
  className='notif-popover'
  open={this.state.notifOpen}
  anchorEl={this.state.anchorEl}
  anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
  targetOrigin={{horizontal: 'left', vertical: 'top'}}
  onRequestClose={this.handleRequestClose}
>

Answer 1

应用样式的唯一道具是：className类的字符串和带样式的style对象。请记住，这些应用于根元素（模态组件）。

Docs SourceCode（如果你使用的是v1-beta）。您可以在源中看到剩余的道具传递给Modal组件

const {
  anchorEl,
  anchorReference,
  anchorPosition,
  anchorOrigin,
  children,
  classes,
  elevation,
  getContentAnchorEl,
  marginThreshold,
  onEnter,
  onEntering,
  onEntered,
  onExit,
  onExiting,
  onExited,
  open,
  PaperProps,
  role,
  transformOrigin,
  transitionClasses,
  transitionDuration,
  ...other
} = this.props;

<Modal show={open} BackdropInvisible {...other}>

您可以在消息来源中看到Material UI使用来自qazxsw poi的qazxsw poi HoC并且具有withStyles组件的样式对象

react-jss

maxHeight：'计算（100vh - 32px）'

这绑定到类Paper，然后传递给类prop并应用于

export const styles = {
  paper: {
    position: 'absolute',
    overflowY: 'auto',
    overflowX: 'hidden',
    // So we see the popover when it's empty.
    // It's most likely on issue on userland.
    minWidth: 16,
    minHeight: 16,
    maxWidth: 'calc(100vw - 32px)',
    maxHeight: 'calc(100vh - 32px)'

组件。

解：

在根元素上使用paper prop，嵌套选择器以Paper组件为目标（检查并查看它应用于该类的元素）。

可能的选择器示例（应该使用更好的选择器，检查元素）

className

然后你会做Paper

Answer 2

这个CSS覆盖似乎对我有用：

.rootElement > * { max-height: '375px' } 

顺便说一句，这是一个令人难以置信的糟糕的API。