0

我在其他组件中使用星云主题时遇到问题我在其他组件中使用过它并且效果很好但在其他组件中不起作用

这是我的代码

@Component({
  selector: 'ngx-my-date-picker',
  templateUrl: './ngx-my-date-picker.component.html',
  styleUrls: ['./../style/ngx-my-date-picker.scss'],
  exportAs: 'mydatepicker',
  providers: [LocaleService, UtilService, MYDP_VALUE_ACCESSOR],
  encapsulation: ViewEncapsulation.None,
})

这是我的 scss 文件

    @import '../../../@theme/styles/themes';

    @include nb-install-component() {
      $color_1: #555;
      $color_2: nb-theme(color-fg-text);
      $color_3: #000;
      $color_4: #999;
      $color_5: #ccc;
.disabled {
      cursor: default !important;
      color: $color_2;
      background: #fbefef;
    }
    .highlight {
      color: $color_2;
    }
    }

当我删除 @include nb-install-component 样式工作但不使用全局颜色，如果我使用 nb-install-component 样式根本不起作用

如果我在这方面有任何错误，请告诉我

甚至认为我在这里使用了相同的方法

@Component({
  selector: 'ngx-file-uploader',
  templateUrl: './ngx-file-uploader.component.html',
  styleUrls: ['../scss/ngx-file-uploader.component.scss'],
})

我的 sass 文件

@import './../../../@theme/styles/themes';

@include nb-install-component() {

  .drop-zone {
    height: 100px;
    font-size: nb-theme(form-control-font-size);
    box-shadow: nb-theme(card-shadow);
    font-weight: nb-theme(card-font-weight);
    border: nb-theme(card-border-width) nb-theme(card-border-type) nb-theme(card-border-color);
    border-radius: nb-theme(card-border-radius);
    background: nb-theme(card-bg);
    color: nb-theme(card-fg-text);
    margin-bottom: nb-theme(card-margin);
    margin-top: nb-theme(card-margin);
  }

  .content {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .over {
    background-color: nb-theme(color-bg-active);
  }
}
4

1 回答 1

0

我发现问题出在我的组件中，scss 文件已经编译，但是由于封装被禁用，当我从组件中删除此行时，样式不起作用

@Component({
  selector: 'ngx-my-date-picker',
  templateUrl: './ngx-my-date-picker.component.html',
  styleUrls: ['./../style/ngx-my-date-picker.scss'],
  exportAs: 'mydatepicker',
  providers: [LocaleService, UtilService, MYDP_VALUE_ACCESSOR],
  encapsulation: ViewEncapsulation.None,
})

变得

@Component({
  selector: 'ngx-my-date-picker',
  templateUrl: './ngx-my-date-picker.component.html',
  styleUrls: ['./../style/ngx-my-date-picker.scss'],
  exportAs: 'mydatepicker',
  providers: [LocaleService, UtilService, MYDP_VALUE_ACCESSOR],
})
于 2018-11-19T02:17:13.493 回答