Material ui can't modify Popover max-height

Question

I'm using Popover component with material-ui but I can't modify the max-height that is a formula like max-height: calc(100% - var). I've tried everything, className, override but this is not working.

Here is the code:

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
import { ThemeProvider, createTheme } from '@material-ui/core/styles';
import { multi_select_IT } from "../helpers/const";
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import IconButton from '@material-ui/core/IconButton';
import ClearIcon from '@material-ui/icons/Clear';
import Popover from '@material-ui/core/Popover';
import FilterAltIcon from '@material-ui/icons/FilterAlt';

const ColumnTextFilter = (props) => {

  const [selected, setSelected] = useState([]);
  const [isActive, setActive] = useState(false);
  const [isEmpty, setEmpty] = useState(true);
  const [textInput, setTextInput] = useState('');
  const [anchorEl, setAnchorEl] = useState(null);
  const [open, setOpen] = useState(false);
  const options = props.options;

  const theme = createTheme({
    components: {
      MuiPopover: {
        styleOverrides: {
          root: {
            maxHeight: 500,
          },
        },
      },
    },
  });     

  //various functions

  return (
    <ThemeProvider theme={theme}>
      <IconButton aria-label="delete" size="small" onClick={handleClick}>
        <FilterAltIcon />
      </IconButton>

    <Popover 
        onClose={handleClose} 
        open={open} 
        anchorEl={anchorEl} 
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: props.placement? props.placement : 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: props.placement? props.placement : 'center',
        }}
        >
      //popover content
    </Popover>
    </ThemeProvider>
  ); 
};

export default ColumnTextFilter;

How can i customize the max-height?

Answer 1

If you want to adjust the popover height/width, you'll want to target the paper property with makeStyles.

For example:

const useStyles = makeStyles({
  paper: {
    width: (props) => (props.width ? `${props.width}px` : "100%"),
    height: (props) => (props.height ? `${props.height}px` : "100%")
  }
});

const ColumnTextFilter = () => {
  const [height, setHeight] = React.useState("");
  const [width, setWidth] = React.useState("");
  // passing height and width to useStyles to interpolate "paper" properties
  const classes = useStyles({ height, width }); 

  return (...);
}

Demo:

Code:

import * as React from "react";
import {
  Popover,
  IconButton,
  InputAdornment,
  makeStyles,
  TextField
} from "@material-ui/core";
import { Clear, PageviewOutlined } from "@material-ui/icons";
import "./styles.css";

const useStyles = makeStyles({
  paper: {
    boxShadow: "0px 0px 9px 0px rgba(0,0,0,0.5)",
    width: (props) => (props.width ? `${props.width}px` : "calc(100%-64px)"),
    height: (props) => (props.height ? `${props.height}px` : "100%")
  }
});

const ColumnTextFilter = () => {
  const [height, setHeight] = React.useState("");
  const [width, setWidth] = React.useState("");
  const [anchorEl, setAnchorEl] = React.useState(null);
  const classes = useStyles({ height, width });

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div className="app">
      <TextField
        fullWidth
        type="number"
        label="Height"
        value={height}
        variant="outlined"
        placeholder="Set popover height in pixels..."
        onChange={({ target: { value } }) => setHeight(value)}
        InputProps={{
          endAdornment: <InputAdornment position="end">px</InputAdornment>
        }}
      />
      <IconButton
        aria-label="reset-height"
        size="small"
        onClick={() => setHeight("")}
      >
        <Clear />
      </IconButton>
      &nbsp;Reset Height
      <br />
      <br />
      <TextField
        fullWidth
        type="number"
        label="Width"
        value={width}
        variant="outlined"
        placeholder="Set popover width in pixels..."
        onChange={({ target: { value } }) => setWidth(value)}
        InputProps={{
          endAdornment: <InputAdornment position="end">px</InputAdornment>
        }}
      />
      <IconButton
        aria-label="reset-width"
        size="small"
        onClick={() => setWidth("")}
      >
        <Clear />
      </IconButton>
      &nbsp;Reset Width
      <br />
      <br />
      <IconButton aria-label="delete" size="small" onClick={handleClick}>
        <PageviewOutlined />
      </IconButton>
      &nbsp;Click button to show popover
      <Popover
        id={id}
        open={open}
        classes={classes}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
      >
        Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
        Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta
        dapibus. Pellentesque in ipsum id orci porta dapibus. Nulla porttitor
        accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum
        sed sit amet dui. Donec sollicitudin molestie malesuada. Lorem ipsum
        dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet
        elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero
        malesuada feugiat.
        <br />
        Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis
        lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Praesent sapien massa, convallis a
        pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Nulla quis lorem ut libero malesuada
        feugiat. Cras ultricies ligula sed magna dictum porta. Sed porttitor
        lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Mauris
        blandit aliquet elit, eget tincidunt nibh pulvinar a.
        <br />
        Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
        Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id
        orci porta dapibus. Sed porttitor lectus nibh. Mauris blandit aliquet
        elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui
        posuere blandit. Curabitur arcu erat, accumsan id imperdiet et,
        porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis
        quis ac lectus. Curabitur aliquet quam id dui posuere blandit. Mauris
        blandit aliquet elit, eget tincidunt nibh pulvinar a.
        <br />
        Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin
        molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla
        porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada
        feugiat. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum
        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec
        velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
        <br />
        Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu
        erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo,
        lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat,
        accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus.
        Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec
        rutrum congue leo eget malesuada. Curabitur aliquet quam id dui posuere
        blandit. Donec rutrum congue leo eget malesuada. Sed porttitor lectus
        nibh.
      </Popover>
    </div>
  );
};

export default ColumnTextFilter;