javascript - 在悬停时有条件地添加伪类

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

这是我的代码示例：

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: "\2605";
  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: "\2605";
  color: #f6a128;
}

我不希望它生成：

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

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

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

什么时候props.hasColorStar是真的？

有没有一种方法可以通过样式化组件来实现？

最佳答案

如果您有道具hasColorStar，并希望有条件地应用样式，则可以执行以下操作：

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