悬停时有条件地添加伪 class

Question

我正在尝试使用样式组件，我需要一种方法来有条件地在悬停时添加伪class。

这是我的代码示例：

buildRating(numberRating, totalRating) {
  const Star = styled.div`
    display: inline;

    div&:hover:before {
      color: ${Colors.goldColor};
    }
    &:before {
      unicode-bidi: bidi-override;
      direction: ltr;
      content: '\2605';
      color: ${props =>
        props.hasColorStar ? Colors.goldColor : Colors.blackColor};
    }
  `;

  const ratings = [];
  for (let i = 0; i < totalRating; i++) {
    ratings.push(
      i < numberRating ? <Star key={i} hasColorStar /> : <Star key={i} />,
    );
  }
  return ratings;
}

现在上面的样式组件将生成：

/* sc-component-id: sc-iwsKbI */
.sc-iwsKbI {
}
.NnxkP {
  display: inline;
}
div.NnxkP:hover:before {
  color: #f6a128;
}
.NnxkP:before {
  unicode-bidi: bidi-override;
  direction: ltr;
  content: "05";
  color: #363636;
}

/* sc-component-id: sc-gZMcBi */
.sc-gZMcBi {
}
.dBzcSQ {
  display: inline;
}
div.dBzcSQ:hover:before {
  color: #f6a128;
}
.dBzcSQ:before {
  unicode-bidi: bidi-override;
  direction: ltr;
  content: "05";
  color: #f6a128;
}

我不希望它生成：

div.dBzcSQ:hover:before {
  color: #f6a128;
}

有没有办法使用下面的样式组件

div&:hover:before {
   color: ${Colors.goldColor};
}

何时 props.hasColorStar 为真？

有没有办法用样式组件来完成这个？

Answer 1

如果你有道具 hasColorStar 并且想根据它有条件地应用样式，你可以执行以下操作：

 const Star = styled.div`
    ...
    ${({ hasColorStar }) => hasColorStar && `
      div&:hover:before {
        color: ${Colors.goldColor};
      }
    `}
    ...
 `;

悬停时有条件地添加伪 class

Conditionally add pseudo-class on hover

javascript

reactjs

styled-components