reactjs 如何使用sx属性为所选菜单项覆盖MUI css？

wlzqhblo 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(133)

我想将MenuItemStyle传递给MenuItemsx prop，使用：

const MenuItemStyle = {
  '&:hover': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
  '&:selected, &:selected:hover': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
  '&:focusVisible': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
}

字符串
返回包含

<MenuItem key={method} value={method} sx={MenuItemStyle}>
              <Checkbox style={CheckboxStyle} checked={value.indexOf(method) > -1} />
              <ListItemText primary={method} primaryTypographyProps={fontStyle} />
            </MenuItem>

型
我可以让悬停风格改变，但不能改变selected或selected:hover。也许我使用了错误的访问器？我想不通

reactjs

来源：https://stackoverflow.com/questions/76821726/how-to-overside-mui-css-for-selected-menu-item-using-sx-prop

1条答案

按热度按时间

hzbexzde1#

你可以试试这个：

const MenuItemStyle = {
  '&:hover': {
    backgroundColor: ${theme.color.secondaryHover},
  },
  '&.Mui-selected, &.Mui-selected:hover': {
    backgroundColor: ${theme.color.secondaryHover},
  },
  '&:focusVisible': {
    backgroundColor: ${theme.color.secondaryHover},
  },
};

字符串
如果您使用的是MUI Select，则可以使用MenuProps。
举例来说：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  MenuProps={{
    sx: {
      "& .Mui-selected.MuiMenuItem-root": {
        backgroundColor: `cyan`
      },
      "& .MuiMenuItem-root:hover": {
        backgroundColor: `green`
      }
    }
  }}
>
</Select>

型

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs 如何使用sx属性为所选菜单项覆盖MUI css？

1条答案

相关问题

热门标签

最新问答