Как изменить цвет меню в материале-интерфейсе

Question

Я использую Меню с material-ui и хочу изменить цвет фона. Проблема в том, что, когда я даю цвет Меню, оно меняет весь фон страницы, когда появляется всплывающее меню. И когда я применяю цвет к пунктам меню, он оставляет некоторые серые оттенки сверху и снизу, потому что все эти пункты меню заключены в элемент div. Проблема Песочница: https://codesandbox.io/s/material-ui-dropdown-background-color-g88e1

Как правильно изменить цвет фона меню?

Я пытался createMuiTheme изменить это, но это меняет цвет всех меню в моем приложении. Я хочу применить этот стиль только к одному из пунктов меню. Итак, ищем решение для этого, используя makeStyle

Answer 1

Есть несколько способов

1.Material-UI Меню CSS API

у нас есть API под названием paper

Глобальный класс: .MuiMenu-paper
Описание: Стили, примененные к компоненту Бумага.

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

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

2.Использование Material-UI селектор вложенности для прямого выбора MuiPaper-root

Необязательный способ для некоторых случаев, когда отсутствует связанный CSS API.

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

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

---

---

Вы можете проверить структуру DOM, чтобы узнать, какое имя элемента нужно использовать

<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 кажется первым , Так что использовать было бы хорошо.