Компонент Material UI Menu не получает стили, примененные в React

Question

Я новичок в material-UI. Здесь у меня есть компонент меню, который выглядит так:

<Menu
    classes={{ paper: css.paperMenu }}
    className={classNames({
      [css.menuMarginTop]: true
    })}

>

.menuMarginTop {
  margin-top: 14px;
}

также имеет другие свойства. Теперь, когда я пытаюсь добавить стили на основе опоры, стиль menuMarginTop не применяется, может ли кто-нибудь сообщить мне, как это сделать?

Спасибо.

Answer 1

Похоже, вы используете обычный CSS, но Material-UI использует JSS-основу в качестве своих решений для стилизации. Вы можете прочитать о решениях для стилизации здесь и о том, как настроить CSS из компоненты здесь .

Вы можете сделать это в вашем случае

import Menu from "@material-ui/core/Menu";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paperMenu: {
    color: "red"
  },
  menuMarginTop: {
    color: "blue"
  }
}));

export default function App(props) {
  const classes = useStyles();
  return (
    <Menu
      classes={{ paper: classes.paperMenu }}
      className={classes.menuMarginTop}
    />
  );
}

Здесь classes.paperMenu переопределит базовый класс бумаги (компонента), а menuMarginTop будет применен к элементу root компонента Menu. Material-UI генерирует уникальное имя класса случайным образом во время выполнения, поэтому вы не можете полагаться на фиксированное имя класса, как другие библиотеки, вы можете только переопределить базовый класс, используя classes реквизиты, подробнее в приведенных выше ссылках

Помните это один из способов переопределить классы, есть и другие способы, например, компонент более высокого порядка withStyles, withTheme и c, ссылки выше предоставят вам достаточно информации