Нужна помощь по стилю MaterialUI MenuItem Компонент

Question

Я пытаюсь стилизовать пункт меню, используя платформу MaterialUI, и чувствую себя потерянным.

Вот что я собираюсь сделать:

И вот, что я получил, пока: https://codesandbox.io/s/542wvq4mxl

Любая помощь будет принята с благодарностью.

Answer 1

Проблема, с которой я сталкиваюсь, заключается в том, что к компоненту MenuItem применен padding.Но вы пытаетесь сделать так, чтобы оранжевый фон значка растянулся на всю высоту, игнорируя это заполнение (или, наоборот, белый фон текста и стрелки делали то же самое).Может быть, css способ сделать это, но я не знаю об этом.

Поэтому я бы попытался удалить заполнение по умолчанию для вашего класса menuItem и добавить интервал обратно в себя, например * 1006.*https://codesandbox.io/s/z6q4z54njp

Answer 2

Измените свой стиль на следующий.

const styles = theme => ({
  menuItem: {
    backgroundColor: "#fff",
    height: "50px",
    fontSize: "50px"
  },
  primary: {
    height: "100%",
    backgroundColor: "#fff",
    fontSize: "30px"
  },
  icon: {
    fill: "#ffff",
    backgroundColor: "#ff6b30",
    width: "70px",
    height: "70px"
  }
});