如何更改 material-ui 中菜單的顏色

Question

我正在使用material-ui的菜單並想更改背景顏色。 問題是，當我給菜單顏色時，它會在菜單彈出器出現時改變整個頁面背景。 當我對菜單項應用顏色時，它會在頂部和底部留下一些灰色陰影，因為所有這些菜單項都包含在一個 div 中。 問題沙箱： https://codesandbox.io/s/material-ui-dropdown-background-color-g88e1

更改菜單背景顏色的正確方法是什么？

我嘗試createMuiTheme來改變它，但它改變了我的應用程序中所有菜單的顏色。 我想將此樣式僅應用於其中一個菜單項。 所以尋找使用makeStyle的解決方案

Answer 1

有多種方式

1.Material-UI菜單 CSS API

我們有 API 稱為紙

全球 class: .MuiMenu-paper
說明： Styles 應用於 Paper 組件。

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

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

2.使用 Material-UI嵌套選擇器直接 select 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似乎是第一個。 所以用起來就好了。