使用 material-ui jss 样式将鼠标悬停在父项上时，如何更改子项的样式

Question

我在反应中使用 material-ui。假设我有这些样式的组件

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

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

我想使用上面的样式将鼠标悬停在 externalDiv 上时更改 addIcon 的样式。

这是我的例子：https : //codesandbox.io/s/trusting-mcnulty-b1gcd?fontsize=14&hidenavigation=1&theme=dark

Answer 1

下面是 v4 的正确语法示例（"& $addIcon"嵌套在 中&:hover）。再往下是一些 v5 示例。

import * as React from "react";
import { render } from "react-dom";
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: (props: { dragActive: boolean }) => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

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

const rootElement = document.getElementById("root");
render(<App />, rootElement);

相关文档和答案：

• https://cssinjs.org/jss-plugin-nested?v=v10.0.0#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
• 如何在 JS 中使用 css 来实现嵌套悬停样式、Material UI
• Material UI：根据班级影响孩子
• material-ui 中的高级样式

对于那些已经开始使用 Material-UI v5 的人，下面的示例实现了相同的样式，但利用了新的sxprop。

import Grid from "@material-ui/core/Grid";
import { useTheme } from "@material-ui/core/styles";
import AddIcon from "@material-ui/icons/Add";

export default function App() {
  const theme = useTheme();
  return (
    <Grid container>
      <Grid
        item
        sx={{
          p: 4,
          backgroundColor: theme.palette.grey[200],
          "&:hover": {
            backgroundColor: theme.palette.grey[100],
            cursor: "pointer",
            "& .addIcon": {
              color: "purple"
            }
          }
        }}
      >
        <AddIcon
          className="addIcon"
          sx={{
            height: "50px",
            width: "50px",
            color: theme.palette.grey[400],
            mb: 2
          }}
        />
      </Grid>
    </Grid>
  );
}

这是另一个 v5 示例，但使用 Emotion 的styled函数而不是 Material-UI 的sxprop：

import Grid from "@material-ui/core/Grid";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import AddIcon from "@material-ui/icons/Add";
import styled from "@emotion/styled/macro";

const StyledAddIcon = styled(AddIcon)(({ theme }) => ({
  height: "50px",
  width: "50px",
  color: theme.palette.grey[400],
  marginBottom: theme.spacing(2)
}));
const StyledGrid = styled(Grid)(({ theme }) => ({
  padding: theme.spacing(4),
  backgroundColor: theme.palette.grey[200],
  "&:hover": {
    backgroundColor: theme.palette.grey[100],
    cursor: "pointer",
    [`${StyledAddIcon}`]: {
      color: "purple"
    }
  }
}));
const theme = createTheme();
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container>
        <StyledGrid item>
          <StyledAddIcon />
        </StyledGrid>
      </Grid>
    </ThemeProvider>
  );
}

还有一个使用 Emotion 的 css 道具的 v5 示例：

/** @jsxImportSource @emotion/react */
import Grid from "@material-ui/core/Grid";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import AddIcon from "@material-ui/icons/Add";

const theme = createTheme();
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container>
        <Grid
          item
          css={(theme) => ({
            padding: theme.spacing(4),
            backgroundColor: theme.palette.grey[200],
            "&:hover": {
              backgroundColor: theme.palette.grey[100],
              cursor: "pointer",
              "& .addIcon": {
                color: "purple"
              }
            }
          })}
        >
          <AddIcon
            className="addIcon"
            css={(theme) => ({
              height: "50px",
              width: "50px",
              color: theme.palette.grey[400],
              marginBottom: theme.spacing(2)
            })}
          />
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

Answer 2

这表示当前选择器是父组件：

'&': { /* styles */ }

这意味着父组件处于悬停状态：

'&:hover': { /* styles */ }

这意味着父组件内的子组件处于悬停状态：

'&:hover .child': { /* styles */ }

&如果您使用伪类，您还可以省略 & 符号：

':hover .child': { /* styles */ }

使用 prop 的完整代码sx（也可以在 中使用相同样式的对象styled()）：

<Box
  sx={{
    width: 300,
    height: 300,
    backgroundColor: "darkblue",
    ":hover .child": {
      backgroundColor: "orange"
    }
  }}
>
  <Box className="child" sx={{ width: 200, height: 200 }} />
</Box>