如何用带样式的组件覆盖 MUI PaperProps？

Question

我正在使用 MUI，我想用样式化的组件覆盖菜单的宽度。

我试过这个：

const StyledMenu = styled(Menu)`
  && {
    width: 100%;
  }
`;

什么也没发生。

然后我发现 MUI 有 PaperProps 并且在应用时：

<StyledMenu
  id="menu-appbar"
  PaperProps={{
    style: {
      width: '100%',
    },
  }}
>

我得到了想要的结果，但我想通过 styled-components 来完成它，这可能吗？

Answer 1

您在PaperProps属性中编写的每个样式都会影响.MuiPaper-root class。因此您的代码可以是这样的：

const StyledMenu = styled(Menu)`
  && {
    & .MuiPaper-root {
      width: 100%;
    }
  }
`;

可以在 文档中找到更多见解。