如何通过 Material UI MenuProps 传递情感样式以覆盖纸张根类

Question

我正在使用Material UI for a Select 菜单和Emotion 进行样式设置。

单击“选择”菜单中的菜单项后，我需要覆盖菜单弹出框的根类（MuiPaper-root 或 MuiMenu-paper）。

我有一个 Select 组件：

<Select
  value={selectValue}
  onChange={handleChange}
  css={styles.select}
  MenuProps={{
    css: { paper: styles.popover },
  }}
>
  {items?.map(({ item, label }) => {
    return (
      <MenuItem
        key={item}
        value={item}
        css={styles.menuItem}
      >
        {label}
      </MenuItem>
    );
  })}
</Select>

在我的样式文件中，我在下面尝试过但不起作用？

popover: css`
  background-color: red !important; 
`,

或者这个：

   popover: css`
     .MuiPaper-root {
       background-color: red !important;
    }
`,

我还尝试使用classes prop 而不是css prop：

MenuProps={{
 classes: { paper: styles.popover },
}}

然后我得到这个 linting：

（属性）纸？：字符串 |未定义类型“SerializedStyles”不是 可分配给类型“字符串”。

有人知道如何通过 MenuProps 传递情感样式吗？

Answer 1

您的错误在于MenuProps 声明。要覆盖MuiMenu-paper，你应该写：

<Select
   ...
   MenuProps={{
      classes: {
         paper: classes.menuPaper
      }
   }}
>
...
</Select>

那么风格：

const useStyles = makeStyles((theme) => ({
  menuPaper: {
    backgroundColor: "red"
  }
}));

Here 一个工作示例。