How to override Material-UI Popover styles?

Question

How can I override the default value of the max-height property for the Popover component?

I tried to add style={{'maxHeight': '365px'}}, but nothing is changed:

<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

The only props that apply style are: className string of classes and style object with styles. Remember that these are applied to the root element (the Modal component).

Docs SourceCode (if you're using v1-beta). You can see in the sources that the remaining props are passed to the Modal component

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

You can see in the sources that MaterialUI uses the withStyles HoC from react-jss and has a styles object for the Paper component

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

This is bound to a class paper and then passed to the classes prop and applied to the Paper component.

Solution:

Use the className prop on the root element with nested selector that targets the Paper component (inspect and see on which element it applies the class).

Example of possible selector (should definitely use a better one, inspect element)

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

and then you'd do <Popover className='rootElement' />