angular - 覆盖一个组件的 Nebular 主题

Question

我正在为我的 Angular 应用程序使用 Nebular，目前我正在尝试找出如何仅覆盖一页上一个组件的主题设置，并使用原始设置在其他地方使用该组件。

示例:(nb-sidebar) 这用作位于屏幕左侧的菜单侧边栏。但我也在右侧放置了一个，用于不同的目的。

它们当前都继承了主题值。所以我可以进入 theme.scss 并重新调整组件的大小，但它当然会影响两个侧边栏。我只想调整右手边的大小!我尝试在我自己的 [component].scss 中使用以下内容覆盖此内容:

nb-sidebar,
nb-sidebar > .expanded {
  width: 23rem;
}
nb-sidebar,
nb-sidebar > .collapsed {
  width:0px;
}

以及上述的许多其他变体都没有成功。

其他组件如nb卡等没有问题需要更改。更改其他功能(例如侧边栏的背景颜色)也没有问题。但宽度...不。

有什么建议吗？问候

Answer 1

我遇到了完全相同的问题，最后通过将以下内容添加到 styles.css 中使其正常工作:

.right-sidebar div.main-container.main-container-fixed {
      width: 20vw !important;
}
//adjust the margin as well to keep the sidebar in the viewport
.right-sidebar {
     margin-left: 80vw !important;
 }