Nebular тема функция nb-install-component не работает - PullRequest
Новая
       12

Nebular тема функция nb-install-component не работает

0 голосов
/ 18 ноября 2018

У меня проблема с использованием небулярной темы в другом компоненте Я использовал его в другом компоненте, и он работал очень хорошо, но в другом компоненте не работает

это мой код 

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

1 Ответ

0 голосов
/ 19 ноября 2018

Я обнаружил проблему в моем компоненте, файл 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],
})
...