Части mat-slide-toogle не отображаются при установке фона костюма в теме

Question

В приложении angular все элементы mat-slide-toogle пропускают свои "рельсы", когда я устанавливаю фон костюма в пользовательской теме. Я попытался изменить цвет фона родительского элемента <div>, просто чтобы посмотреть, окрашивается ли он так же, как фон, но он все равно не отображается. «Рельс» как-то отсутствует. Я ищу, чтобы сохранить цвет фона costum и правильно отобразить silder. Я попытался установить цвет backgorund и его цвет как класс css, но "rail" не вернулся.

Случай 1: При использовании фонового фона silde не отображается правильно.

// define 3 theme color
// mat-palette accepts $palette-name, main, lighter and darker variants
$costum-theme-primary: mat-palette($mat-grey);
$costum-theme-accent: mat-palette($mat-amber);
$costum-theme-warn: mat-palette($mat-red, A200);

// custom background and foreground palettes
$theme-background: (
  background: whitesmoke,
);

$theme-foreground: (
  text: black,
);

@function create-theme($primary, $accent, $warn: mat-palette($mat-red)) {
    @return (
      primary: $primary,
      accent: $accent,
      warn: $warn,
      is-dark: false,
      foreground: $theme-foreground,
      background: $theme-background,
    );
  }

$costum-theme: create-theme($costum-theme-primary, $costum-theme-accent, $costum-theme-warn);

@include angular-material-theme($costum-theme);

Случай 2: Без пользовательского фона ползунок отображается правильно

// define 3 theme color
// mat-palette accepts $palette-name, main, lighter and darker variants
$costum -theme-primary: mat-palette($mat-grey);
$costum -theme-accent: mat-palette($mat-amber);
$costum -theme-warn: mat-palette($mat-red, A200);

$costum -theme: mat-light-theme($costum -theme-primary, $costum -theme-accent, $costum -theme-warn);

@include angular-material-theme($costum -theme);