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

Question

我想通过将鼠标悬停在卡片上来更改排版的颜色。经过多次尝试后，我终于决定在这里发帖。如果我从版式中删除颜色，然后将鼠标悬停在卡片上，那么它就会起作用，它会通过将鼠标悬停在卡片上来更改文本的颜色。但我不想要默认的排版颜色，我想使用我的一种。请检查屏幕截图。

在此输入图像描述

Answer 1

要使用 React Material UI 样式在将鼠标悬停在父元素上时更改子元素的样式，我们可以使用父元素的

makeStyles

选择器调用

&:hover

来更改将鼠标悬停在子元素上时的样式。

例如：这里

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 },
  },
}));