材质按钮悬停颜色显示不正确答案

【问题标题】：Material button hover color displayed incorrectly材质按钮悬停颜色显示不正确
【发布时间】：2018-02-05 16:10:44
【问题描述】：

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

为了自定义组件中使用的一些材质按钮的颜色，我编写了这个 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调色板，而#e7d8cc按钮使用accent调色板。

主要默认颜色是#202020，而强调默认颜色是#ee7617

不知何故，按钮的实际悬停颜色与按钮的文本颜色有关。

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

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

我使用的材料版本是2.0.0-beta.8，角芯版本4.1.2

【问题讨论】：

标签： angular sass angular-material2

【解决方案1】：

您看到的悬停颜色不是实际的按钮背景，而是一个“焦点覆盖” div，它的位置可以覆盖按钮的整个大小。它的不透明度通常为 0，但当按钮悬停时，其不透明度设置为 1。

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

【讨论】：