Akveo 星云角主题

Question

I'm trying to ovewrite some styling of Accordion component from Nebular but it doesn't work if I enable multiple themes mode.

If I set component styling without multiple themes support, it does work:

@import "../../@theme/styles/themes.scss";
$border: red;

.contato {
  margin-bottom: 5px !important;
}

nb-accordion nb-accordion-item:last-child.collapsed nb-accordion-item-header {
  border-radius: 5px;
  background-color: $border !important;
}

But if I enable multiple themes according to instructions in: https://akveo.github.io/nebular/docs/design-system/use-theme-variables#access-with-multiples-theme-mode it doesn't work:

@import "../../@theme/styles/themes.scss";
@include nb-install-component {
  $border: nb-theme(background-alternative-color-4);

  .contato {
    margin-bottom: 5px !important;
  }

  nb-accordion nb-accordion-item:last-child.collapsed nb-accordion-item-header {
    border-radius: 5px;
    background-color: $border !important;
  }
}

Component's background color keeps unchanged.

What's wrong? Do I need to enable something else?

• Nebular 5.

Thanks,

Answer 1

Adding ::ng-deep to css classes works for me:

@import "../../@theme/styles/themes.scss";
@include nb-install-component {
  $border: nb-theme(background-alternative-color-4);

  ::ng-deep .contato {
    margin-bottom: 5px !important;
  }

  ::ng-deep nb-accordion nb-accordion-item:last-child.collapsed nb-accordion-item-header {
    border-radius: 5px;
    background-color: $border !important;
  }
}

See ng-deep docs here