angular - 如何为组件元素添加具有动态样式的悬停效果？

Question

我有这个 Angular 组件，其中悬停效果当前与 .scss 文件中的伪类 :hover 一起应用。但我想用动态 values 应用悬停效果。

所以假设如果我希望元素的背景在悬停时改变，当前的 css 看起来像这样：

.element {
     display: flex;
     justify-content: center;

     &:hover {
          background-color: red;
     }
}

但现在我希望悬停背景颜色具有动态 values ，该颜色可在用户从 UI 提供的组件内使用，因此颜色可以是任何颜色。我还想实现的另一件事是在元素被选中时为其添加一个类。我的意思是当悬停时，背景将变为动态 value 但如果选择了元素，则相同的颜色将成为背景颜色。如果取消选择，它会回到原来的颜色。

我是 Angular 的新手，所以我不确定如何实现这一点。任何人都可以帮助我吗？

Answer 1

您不能通过 JavaScript 动态设置伪类。您将不得不：

我赞成第二种选择。在您的组件声明中关闭视图封装，确保您的组件 CSS 通过一些 CSS 组件方法（如 BEM）合理地包含在该组件中，并让消费者覆盖您的样式。

回答1