javascript - 使用父JSX上的CSS悬停更改子div的样式

我正在使用material-ui表。在其中，我正在这样映射行：

.map(row => (
  <TableRow
    className={classes.clickableRow}
    key={row[rowKey]}
  >
    {generateTableCheckbox(row)}
    {
      columns.map(column => (
        <TableCell
          onClick={onRowClick && !row.disabled
            ? event => onRowClick(event, row)
            : null}
          key={column.field}
          className={classes.body}
          title={column.alt ? column.alt(row) : row[column.field]}
        >
          {column.format ? column.format(row) : row[column.field]}
        </TableCell>
      ))
    }
    {generateTableHoverOptions(row)}
  </TableRow>
))

如您所见，className被设置为clickableRow。

TableRow包含一个悬停选项div，它使用以下函数呈现并置于右侧：

const generateTableHoverOptions = () => {
  if (selected) {
    return (
      <TableCell className={classes.rightHoverIcon}>
        <Icon>expand_more</Icon>
      </TableCell>
    );
  }
  return null;
};

当悬停在backgroundColor上时，我希望能够更改从该函数返回的<TableCell />（className为rightHoverIcon）的clickableRow。这是我一直在尝试使用的js CSS：

clickableRow: {
  '&:hover': {
    backgroundColor: theme.palette.background.default,
    cursor: 'pointer',
  },
  '&:hover > .rightHoverIcon': {
    backgroundColor: 'red',
  },
},
rightHoverIcon: {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  marginTop: 1,
  height: 49,
  position: 'absolute',
  right: 0,
  borderBottomWidth: 1,
  borderBottomColor: 'rgba(224, 224, 224, 1)',
},

期望以div为目标的代码是'&:hover > .rightHoverIcon'，我已经尝试过其他变体，例如'&:hover ~ .rightHoverIcon'和&:hover .rightHoverIcon，但似乎没有一个起作用。

我已经检查了SO上的其他问题，而类似的问题与我的问题不同。如果有人有任何想法，请告诉我！

提前致谢

最佳答案

&:hover > .rightHoverIcon期望.rightHoverIcon是clickableRow的直接子代，但不是（之间有一个表格单元格）。删除>，以使您使用的是descendant combinator而不是child combinator：

clickableRow: {
  '&:hover': {
    backgroundColor: theme.palette.background.default,
    cursor: 'pointer',
  },
  '&:hover .rightHoverIcon': {
  // -----^
    backgroundColor: 'red',
  },
},

或者，或者，如果要使用子组合器，则至少需要两个（例如TableCell仅将一个元素放在其父图标之间），例如&:hover > something-for-the-cell > .rightHoverIcon。