Question

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

以下是我的代码示例：

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为真时？

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

Answer 1

如果你有一个道具hasColorStar，并希望有条件地应用基于它的风格，你可以做如下的事情：

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

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

1 个答案: