如何更改 material ui 中悬停卡片上子元素的颜色？

Question

我想通过将鼠标悬停在卡片上来更改版式的颜色。在尝试了很多之后，我最终决定 post 在这里。如果我从排版中删除颜色，然后将鼠标悬停在卡片上，那么它会起作用，它会通过悬停在卡片上来更改文本的颜色。但我不想要默认的排版颜色，我想使用我的一种。请查看屏幕截图。enter image description here

在此处输入图片描述 enter image description here enter image description here

enter image description here

Answer 1

要使用 React Material UI 样式将鼠标悬停在父项上时更改子项的样式，我们可以使用 [=15] 调用 makeStyles =]&:悬停父元素的选择器，当我们将鼠标悬停在子元素上时更改样式。

例如：- 这里 outerdiv 是每个元素，addIcon 是子元素

import * as React from "react";
import { Grid, makeStyles } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";

const useStyles = makeStyles((theme) => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    "&:hover": {
      cursor: "pointer",
      backgroundColor: theme.palette.grey[100],
      "& $addIcon": {
        color: "purple"
      }
    }
  },
  addIcon: () => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

export default function App() {
  const classes = useStyles();

  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

Answer 2

因为你在属性中设置了颜色，如果你在颜色属性中设置了颜色，你的悬停不起作用。

    <Typography
      variant="body2"
      color={theme.palette.primary.dark}
    </Typography>

如果你想为此设置悬停，你必须在 makeStyles() 或 styled() 中设置默认颜色和悬停。

像这个，我自己做的：

import { styled } from '@mui/material/styles';
import MuiListItemButton from '@mui/material/ListItemButton';

const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
  color: theme.palette.primary.main,
  '& svg': { color: theme.palette.primary.main },
  '&:hover, &:focus': {
    color: theme.palette.white.main,
    backgroundColor: theme.palette.primary.main,
    '& svg': { color: theme.palette.white.main },
  },
}));

如何更改 material ui 中悬停卡片上子元素的颜色？

how to change the color of childs elements on card hover in material ui?

reactjs

material-ui