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

Question

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

Вот для чего я иду:

https://i.stack.im gur.com/x27kG.png

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

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

Answer 1

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

Так что я бы попытался удалить заполнение по умолчанию на вашем menuItem класс и добавить интервал обратно в себя, как 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"
  }
});