Пользовательский интерфейс материала MenuItem переопределяет классы ListItem

Question

Я пытаюсь переопределить стиль MenuItem при наведении курсора и выборе. Насколько я понимаю, решение, безусловно, использует makeStyles для создания пользовательских классов.

 <MenuIte
            classes={{ root: classes.menuItem ,selected:classes.menuItemSelected }}

          >
            {"SomeText"}
          </MenuItem>

export default makeStyles(theme => ({
   menuItemSelected: {
        "&:hover": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    },
    menuItem: {
        fontSize: 12,
        paddingTop: "4px",
        paddingBottom: "4px",
        "&:hover, &:focus": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    }
}));

Однако мои настроенные классы переопределяются .MuiListItem- root .Mui-selected

Итак, я понимаю, что приоритет напрямую связан со спецификой. Мой вопрос - как я могу добавить больше специфичности, используя в этом случае настроенный класс maketyle? codeandbox

https://codesandbox.io/s/material-demo-jnzw7

Answer 1

export default makeStyles(theme => ({
   menuItemSelected: {
        "&:hover": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    },
    menuItem: {
        fontSize: 12,
        paddingTop: "4px",
        paddingBottom: "4px",
        "&:hover, &:focus": {
            backgroundColor: "#4868cf",
            color: "white",
        }
    }
}), { name 'SimpleListMenu' });

Вам нужно дать имя.

https://codesandbox.io/s/material-demo-t7589

Вы можете прочитать https://material-ui.com/styles/advanced/#with -материал-UI-ядро