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}>

您可以在消息来源中看到，MaterialUI使用来自withStyles的{{1}} HoC并且具有react-jss组件的样式对象

Paper

maxHeight：'calc（100vh - 32px）'

这绑定到类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)'，然后传递给类prop并应用于paper组件。

<强>解决方案：

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

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

Paper

然后你会.rootElement > * { max-height: '375px' }

Answer 2

在构建主题时，您应该真正覆盖样式...

createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        fontSize: '1rem',
        backgroundColor: '#000',
      }
    }
  }
})

Answer 3

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

.writeYourOwnClasHere {
  .MuiPaper-root-6 {
    padding: 30px;
    color: pink;
  }
}

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

如何覆盖Material-UI Popover样式？

3 个答案: