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 />（类名为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。

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

1 个答案: