如何覆盖 Material-UI Popover Paper 样式？

Question

基本上，我试图覆盖在我的程序中自动引入的样式。当我使用 Popover 时，我的程序中自动有 MuiPopover-paper 样式，我必须更改此类中的一些样式，但是如何？

.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

覆盖组件样式的方法之一是使用 classes 对象 prop 的规则名称。正如您从Popover的MUI API 文档中看到的，您可以覆盖应用于 Paper 组件的样式：

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