悬停时改变自定义图标组件的颜色

Question

使用Angular，我创建了一个icon组件，它允许设置属性size和color。下面的HTML标签创建了一个图标:

<my-icon size='medium' color='primary-dark'>person</my-icon>

该组件本质上只是material-icons标签的包装器。属性size和color只是简单地给material-icons标签添加了一个CSS类。

现在，我在我的一个父组件中使用这个图标组件。当鼠标悬停在这个图标上方时，我想改变它的颜色。为此，我在父组件中创建了一些SCSS:

my-icon {
&:hover {
color: blue;
}
}

我还尝试在my-icon前面添加::ng-deep。但是，当鼠标悬停在图标上方时，颜色不会改变。改变不透明度而不是颜色。

显然，我的父母不能改变我的图标的颜色。我不知道为什么。查看一下浏览器控制台，就会发现图标组件有一个连接到它的CSS类，它表示由color属性设置的颜色。

无论如何，有人能给我解释一下这种行为吗?

Answer 1

你的CSS语法不正确:https://codebeautify.org/cssvalidate/y22780750

正确的语法:

styles

css

my-icon > mat-icon:hover {
color: blue;
}
.green {
color: green;
}
.medium {
font-size: 50px !important;
}
.large {
font-size: 100px !important;
}

请注意，对于大小font-size，我需要使用!important来覆盖材料默认值。

如果你使用!important规则，它将覆盖该元素上的特定属性之前的所有样式规则!https://www.w3schools.com/css/css_important.asp

父html:

<my-icon [size]="'medium'" [color]="'green'" [name]="'person'"></my-icon>

对于@Input绑定，我们使用括号[]，虽然没有它也可以工作，只是会更容易理解它是一个绑定。可能也会避免来自TS或lint的一些不必要的警告。

MyIconComponent:

import { Component, Input } from '@angular/core';
@Component({
selector: 'my-icon',
template: `<mat-icon [ngClass]="[size, color]" aria-label="Example home icon">{{name}}</mat-icon>`,
styles: [`h1 { font-family: Lato; }`],
})
export class MyIconComponent {
@Input() size: string;
@Input() color: string;
@Input() name: string;
}

所以当你说my-icon:hover { color: blue;}(<-这是有效的语法)这意味着my-icon应该是蓝色的悬停。好了好了。但是my-icon的子结点，也就是mat-icon，仍然是绿色的。my-icon不会关心它的颜色是否应该是蓝色，什么应该是蓝色，它不知道应该在什么颜色上应用。

然而，如果你这样做，例如my-icon :hover { background: blue !important; }，那么my-icon就会发生一些事情，因为它确实有背景(你可以在演示中尝试)。

使用my-icon > mat-icon我们目标my-icon的孩子,只有mat-icon:hover年代和他们的颜色是蓝色,因为mat-icons知道如何处理财产color——因此,他们将会改变颜色在徘徊。

工作示例:https://stackblitz.com/edit/angular-ivy-bqwdqu?file=src%2Fapp%2Fapp.component.html

Answer 2

你可以将悬停样式从css应用到这个类更多参考资料:https://www.w3schools.com/csSref/sel_hover.asp