How to override Material-UI Popover Paper styles?

Question

Basically, i'm trying to override a style which is automatically introduce in my program. When i use Popover, automatically i have MuiPopover-paper styles in my program, i have to change some styles in this class, but how??

.MuiPopover-paper {
    outline: none;
    position: absolute;
    max-width: calc(100% - 32px);
    min-width: 16px;
    max-height: calc(100% - 32px);
    min-height: 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

code part

const styles = (theme: Theme) => {
  return createStyles({
    notifications: {
      width: 449,
      height: 400,
      overflow: 'auto'
    },
    settings: {
      width: 300,
      height: 360
    }
  })
}

Answer 1

One of the ways to overwrite the style of a component is to use the rule name of the classes object prop. As you can see from the MUI API documentation for Popover, you can overwrite the styles applied to the Paper component:

    <Popover classes={{ paper: "MuiPopover-paper" }} />