Angular ngx-material-timepicker 无法自定义

Question

我尝试使用 ngx-material-timepicker ，如下面的代码，但我无法更改任何 CSS 类 我正在关注此链接https://www.npmjs.com/package/ngx-material-timepicker

这是我的代码

 <div class="clock">
    <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly />
                  <ngx-material-timepicker
                    [appendToInput]="true"
                    [disableAnimation]="true"
                    [theme]="oktTheme"
                    (timeSet)="onTimeset($event)"
                    #fullTime
                  ></ngx-material-timepicker>
  </div>

这是ts代码

  oktTheme = {
    container: {
      bodyBackgroundColor: "#424242",
      buttonColor: "#fff"
    },
    dial: {
      dialBackgroundColor: "#555"
    },
    clockFace: {
      clockFaceBackgroundColor: "#555",
      clockHandColor: "#01806b",
      clockFaceTimeInactiveColor: "#fff"
    }
  };

Answer 1

通过将自定义类添加到指令并使用内部指令类将其设置在 style.scss 中来解决此问题

html

 <div class="clock">
                  <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly />
                  <ngx-material-timepicker
                    [appendToInput]="true"
                    [disableAnimation]="true"
                    [theme]="oktTheme"
                    [timepickerClass]="'custome-class'"
                    (timeSet)="onTimeset($event)"
                    #fullTime
                  ></ngx-material-timepicker>
</div>

style.scss

.custome-class {
  direction: ltr;
  .timepicker__header {
    padding: 0px 30px !important;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
  }
  .timepicker-dial__control {
    font-size: 20px !important;
  }

  .timepicker-dial {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    height: 44px;
  }
}

Answer 2

将其放入您的 SCSS 文件中（在 app.component.scss 或您的特定组件中）

::ng-deep ngx-material-timepicker-content{
  --body-background-color: #fff;
  --primary-font-family: 'Roboto',sans-serif;
  --button-color: #c6ff00 !important;
  --dial-active-color: #fff;
  --dial-inactive-color: rgba(255, 255, 255, .5);
  --dial-background-color: #c6ff00 !important;
  --dial-editable-active-color: #c6ff00 !important;
  --dial-editable-background-color: #fff;
  --clock-face-time-active-color: #fff;
  --clock-face-time-inactive-color: #6c6c6c;
  --clock-face-inner-time-inactive-color: #929292;
  --clock-face-time-disabled-color: #c5c5c5;
  --clock-face-background-color: #f0f0f0;
  --clock-hand-color: #c6ff00 !important;
}

Answer 3

更改标题、按钮和时钟指针的颜色。

.ngx-picker-custom {
  direction: ltr;
  .timepicker__header {
    background-color: var(--color-cyan)!important;
  }
  .timepicker-button{
    color: var(--color-cyan)!important;
  }
  .clock-face__clock-hand,
  .clock-face__number > span.active,
  .clock-face__clock-hand{
    background-color: var(--color-cyan)!important;
  }
  .clock-face__clock-hand_minute:before {
    border-color: var(--color-cyan)!important;
  }
}