更改CSS代码后，边框颜色和框阴影颜色不变

Question

我导入nz-date-picker，我想在鼠标悬停并关注date-picker元素时更改边框颜色和框阴影颜色，但更改了该元素的css类中的颜色，但是不起作用

我在组件中导入了ng-zorro-antd模块，并且nz-date-picker正常运行，然后打开F12来找到nz-date-picker元素的类，并将其覆盖在组件scss文件中，但它不起作用，我覆盖了.ant-calendar-picker和.ant-calendar-picker-input，不起作用。也许我重写了错误的类，但是在F12开发工具控制台上可以找到.ant-calendar-picker和.ant-calendar-picker-input。

我的scss代码：

ERROR in node_modules/@ionic/angular/dist/providers/nav-controller.d.ts(13,29): error TS1183: An implementation cannot be declared in ambient contexts.
node_modules/@ionic/angular/dist/providers/nav-controller.d.ts(16,29): error TS1183: An implementation cannot be declared in ambient contexts.
node_modules/@ionic/angular/dist/providers/platform.d.ts(7,51): error TS1183: An implementation cannot be declared in ambient contexts.
node_modules/@ionic/angular/dist/providers/platform.d.ts(10,18): error TS1183: An implementation cannot be declared in ambient contexts.

[ERROR] An error occurred while running subprocess ng.

或类似这样：

:host ::ng-deep {
  .ant-calendar-picker {
    .ant-calendar-picker-input {
      &:hover,
      &:focus {
        border-color: $primary-red;
        box-shadow: none;

      }
    }

  }
}

我可以在chrome元素控制台上看到我的CSS代码确实退出了，但是我不知道为什么它不起作用

这是有效的，但没有帮助：

:host ::ng-deep {
  .ant-calendar-picker {
      &:hover,
      &:focus {
        border-color: $primary-red;
        box-shadow: none;

      }

  }
}

我希望当鼠标悬停在nz-date-picker元素上时，边框颜色和框阴影颜色会改变

Answer 1

如果要在元素上悬停时更改Css，首先该元素必须具有此样式，然后在将其悬停时更改它。例如：

.foo{
    border:1px solid red;
}

然后

.foo:hover{
    border:1px solid green;
}