цвет рамки и цвет рамки не меняются после изменения кода CSS

Question

Я импортирую nz-date-picker и хочу изменить цвет границы и цвет тени блока при наведении курсора мыши на элемент выбора даты, я изменяю цвет в классе css этого элемента, но не работает

Я импортирую модуль ng-zorro-antd в свой компонент, и nz-date-picker работает нормально, затем я открываю F12, чтобы найти класс элемента nz-date-picker, и перезаписываю его в моем файле scss компонента, но это не работает, я переопределяю .ant-calendar-picker и .ant-calendar-picker-input, не работает. Возможно, я переопределил неправильный класс, но .ant-calendar-picker и .ant-calendar-picker-input - это то, что я могу найти на консоли dev-tool F12.

мой код scss:

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

      }
    }

  }
}

или как это:

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

      }

  }
}

Я вижу, что мой css-код действительно выходит из консоли элемента chrome, но я не знаю, почему он не работал

это работает, но не полезно:

.ant-input {
  &:hover {
    border-color: $primary-red;
  }

  &: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;
}