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