Angular mat-datepicker 自定义样式 hover 年月日

Question

我如何在 hover 日月和年以及焦点日月和年的背景颜色上自定义 datpicker 样式背景颜色。

我正在导入这个主题@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 即使我在 indigo-pink.css 中更改了紫色，它的样式显示我紫色我不知道这种颜色设置在哪里。 这是我的客户风格，我想将颜色更改为黄色：

.mat-focus-indicator:hover {
    background-color: yellow  !important;
}

.mat-calendar-body-today {
    background-color: yellow  !important;
}

.mat-calendar-body-selected {
    background-color: yellow  !important;
    color: black !important;
}

.mat-calendar-body-cell-content .mat-focus-indicator {
    background-color: yellow !important;
}

任何帮助请我从几个小时以来一直在努力

问候

Answer 1

根据您的应用程序的结构 - 您需要将这些样式声明放在主 CSS 文件中。 我在 SCSS 中使用它：

.mat-calendar-body-cell-content {
    width: 60% !important;

    &.mat-focus-indicator {
        &:hover {
            background-color: #f5ae90 !important;
        }
    }

    &.mat-calendar-body-selected {
        background-color: $brand-main-orange;

        &:hover {
            background-color: #f5ae90 !important;
        }
    }
}

我已将此代码放在themes.scss 中，这是我项目中的主要样式文件之一。 Colors 已经改变，但是如果我移动鼠标太快，hover 紫色背景颜色仍然会留下一点点，但仍然 - 在大多数情况下它可以工作。

将您的代码移动到主 CSS 文件，它应该可以工作，如果不是也尝试使用

:host 

或者

::ng-deep