Cfrgtkky

I have a problem in using nebular theme in other component
I have used it in other component and it worked very well but in other component is doesn't work

this is my code

@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,

})

this is my scss file

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

    }

    }

When i remove the @include nb-install-component the style work but without using global colors and if i use nb-install-component the style doesn't work at all

please tell me if i have any mistakes in this

even thought that i used the same method here

@Component({

  selector: 'ngx-file-uploader',

  templateUrl: './ngx-file-uploader.component.html',

  styleUrls: ['../scss/ngx-file-uploader.component.scss'],

})

My sass file

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

  }

}

I found the probleme it was in my component
the scss file was already compiled but due to the encapsulation is disabled the style is not working when i remove this line from my component it worked very well

@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,

})

become

@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],

})