Akveo 星云角主题

Question

我正在尝试从 Nebular 重写一些 Accordion 组件的样式，但如果我启用多个主题模式，它就不起作用。

如果我在不支持多个主题的情况下设置组件样式，它确实有效：

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

但如果我按照https://akveo.github.io/nebular/docs/design-system/use-theme-variables#access-with-multiples-theme-mode 中的说明启用多个主题，它就不起作用了：

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

组件的背景颜色保持不变。

怎么了？我需要启用其他功能吗？

• 星云 5。

谢谢，

Answer 1

将 ::ng-deep 添加到 css 类对我有用：

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

参见 ng-deep 文档here