javascript - 如何在material-ui中更改菜单的颜色

Question

我正在使用 material-ui 中的菜单并想更改背景颜色。问题是，当我给菜单颜色时，它会在菜单弹出器出现时改变整个页面背景。当我对菜单项应用颜色时，它会在顶部和底部留下一些灰色阴影，因为所有这些菜单项都包含在一个 div 中。
问题沙盒:https://codesandbox.io/s/material-ui-dropdown-background-color-g88e1

更改菜单背景颜色的正确方法是什么？

我试过createMuiTheme用于更改此设置，但它会更改我的应用程序中所有菜单的颜色。我想将此样式仅应用于其中一个菜单项。所以寻找解决方案来使用 makeStyle

Answer 1

有多种方式

1.Material-UI Menu CSS API

我们有一个名为 的 API纸

Global class: .MuiMenu-paper
Description: Styles applied to the Paper component.

<Menu
  ...
  classes={{ paper: classes.menuPaper }}
>

export const useStyles = makeStyles((theme: Theme) => ({
  menuPaper: {
    backgroundColor: "lightblue"
  }
}));

2.使用Material-UI nesting selector直接选择 MuiPaper-root
在没有暴露相关 CSS API 的某些情况下，这是一种可选方式。

<Menu
  ...
  className={classes.menu}
>

export const useStyles = makeStyles((theme: Theme) => ({
  menu: {
    "& .MuiPaper-root": {
      backgroundColor: "lightblue"
    }
  }
}));

您可以检查 DOM 结构以找出应该使用哪个元素的 className

<div
  class="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"
  tabindex="-1"
  style="opacity: 1; transform: none; transition: opacity 251ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 167ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; top: 16px; left: 16px; transform-origin: -8px 10px;"
>
  <ul>
    <li />
    <li />
    <li />
  </ul>
</div>;

这里 MuiPaper-root似乎是第一个。所以用起来就好了。