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

Question

我正在使用 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，该 div 使用此函数呈现并放置在右侧：

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

当悬停在clickableRow 上时，我希望能够更改从该函数返回的<TableCell /> 的backgroundColor（类名是rightHoverIcon）。这是我一直在尝试使用的 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 的其他问题，虽然类似，但它们与我的问题不同。如果有人有任何想法，请告诉我！

提前致谢

Answer 1

&: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.