如何覆盖 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具有样式的对象。请记住，这些应用于根元素（模态组件）。

文档 源代码（如果您使用的是 v1-beta）。您可以在源代码中看到剩余的 props 被传递给 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}>

您可以在源代码中看到 MaterialUI 使用withStylesHoC并具有组件react-jss的样式对象Paper

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

maxHeight: '计算(100vh - 32px)'

它绑定到一个类paper，然后传递给classes prop并应用于组件Paper。

解决方案：

className将根元素上的 prop 与针对组件的嵌套选择器一起使用Paper（检查并查看它在哪个元素上应用了该类）。

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

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

然后你会做<Popover className='rootElement' />