覆盖一个组件的Nebular主题

Question

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

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

它们当前都继承了主题值。因此，我可以进入themes.scss并重新调整组件的大小，但这当然会影响两个侧边栏。我只想调整右手边的大小！我已经尝试在我自己的component.scss中使用如下内容来覆盖它：

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

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

其他组件，如nb-card等，没有问题需要更改。更改侧边栏上的背景颜色等其他功能也没有问题。但是宽度..。不是的。

有什么建议吗？问候

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

Answer 2

让我们假设您有包含以下HTML的应用程序组件：

<nb-layout>
  <nb-sidebar>Menu</nb-sidebar>
  ...
  <nb-sidebar class="right-sidebar">...</nb-sidebar>
</nb-layout>

请注意第二个侧边栏上的right-sidebar类。现在您可以通过nb-sidebar.right-sidebar选择器只针对第二个侧边栏，并根据需要设置它的样式，例如：

nb-sidebar.right-sidebar {
  width: 100px;
}

Answer 3

基于文档here。

1. 在themes.scss文件

上启用自定义属性

自定义$nb-

-css-自定义属性: true；

1. 创建css类并访问边栏主题变量sidebar -width

边栏宽度{-- .ticketViewSideBar -width:22rem；}

1. 然后在您的html nbsidebar组件上使用class

//这里有一些的代码