如何覆盖 Material-UI Popover 样式？答案

【问题标题】：How to override Material-UI Popover styles?如何覆盖 Material-UI Popover 样式？
【发布时间】：2017-11-08 09:12:30
【问题描述】：

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

我尝试添加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}
>

【问题讨论】：

想检查正确答案:)

标签： reactjs material-ui

【解决方案1】：

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

Docs SourceCode（如果您使用的是 v1-beta）。你可以在sources中看到剩余的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 使用来自 react-jss 的 withStyles HoC，并且具有用于 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: 'calc(100vh - 32px)'

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

解决方案：

在带有嵌套选择器的根元素上使用 className 属性，该选择器以 Paper 组件为目标（检查并查看它将类应用于哪个元素）。

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

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

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

【讨论】：

我怎样才能覆盖max-height属性的默认值？

【解决方案2】：

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

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

【讨论】：

似乎大多数 mui 样式覆盖答案都避免处理主题层，我认为这是因为文档并不是那么好。但这应该是公认的正确答案。

【解决方案3】：

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

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

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

【讨论】：

这不起作用，因为类名上的 id（在这种情况下为6）可以更改