Material 按钮悬停颜色显示不正确

Question

我遵循了指南written here！创建和自定义我自己的主题以与一些 material 2 组件一起使用。我创建了自己的调色板。

为了自定义组件中使用的一些 material 按钮的颜色，我编写了这个 mixin

@mixin action-buttons-group-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    .mat-button {
        &:hover, &:active, &:focus {
            background-color: $mat-color($primary, lighter);
        }
        &.mat-primary {
            color: mat-color($primary);
        }
        &.mat-accent {
            color: mat-color($accent);
        }
    }
}

除了悬停按钮的颜色不正确外，一切正常。使用浏览器的检查工具，我可以看到悬停动作的颜色已正确编译，但我在浏览器中实际看到的是不同的。例如：

在悬停动作中设置的背景颜色是#e6e6e6，但实际显示的是#d2d8e1按钮使用primary调色板，按钮使用#e7d8ccaccent 调色板。

主要默认颜色是 #202020，而重点默认颜色是 #ee7617

按钮的实际悬停颜色以某种方式与按钮的文本颜色相关。

我尝试了一些不同的颜色，但按钮的悬停颜色总是显示错误。

我用来挑选浏览器显示的实际颜色的工具是GPick。

Material版本我用的是2.0.0-beta.8,angular核心版本4.1.2

Answer 1

您看到的悬停颜色不是实际的按钮背景，而是 "focus overlay" div 的位置覆盖了按钮的整个尺寸。它的不透明度通常为 0，但当按钮悬停时，其不透明度设置为 1。

您尝试覆盖的样式需要以 .mat-button-focus-overlay 的背景颜色为目标。确保您的选择器也更具体，以便它们适当地覆盖默认值。

Material 按钮悬停颜色显示不正确

Material button hover color displayed incorrectly

sass

angular-material2

angular