javascript - 使用 CSS 悬停在父 JSX 上更改子 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，它使用此功能呈现并放置在右侧:

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 的其他问题，虽然类似，但它们不像我的问题。如果有人有任何想法，请告诉我!

提前致谢

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.