材料按钮悬停颜色显示不正确

Question

我按照指南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

Answer 1

您看到的悬停颜色不是实际的按钮背景，而是＆＃34;焦点叠加＆＃34; div定位为覆盖按钮的完整大小。 它通常具有0的不透明度，但是当悬停按钮时，其不透明度设置为1。

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