為一個組件覆蓋 Nebular 主題

Question

我正在將 Nebular 用於我的 Angular 應用程序，目前我正在嘗試弄清楚如何僅在一頁上覆蓋一個組件的主題設置，使用原始設置在其他地方使用該組件。

示例：(nb-sidebar) 這用作位於屏幕左側的菜單側邊欄。 但我也在右側放置了一個，用於不同的目的。

他們兩個目前都在繼承主題值。 所以我可以進入 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上的right-sidebar類。 現在您可以通過nb-sidebar.right-sidebar選擇器只定位第二個側邊nb-sidebar.right-sidebar並根據需要設置樣式，例如：

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

Answer 3

基於此處的文檔。

1. 在 themes.scss 文件上啟用自定義屬性

$nb-enable-css-custom-properties: true;

2. 創建一個 css 類並訪問側邊欄主題變量 sidebar-width

    .ticketViewSideBar { --sidebar-width:22rem; }

3. 然后在你的 html nbsidebar 組件上使用 class

    <nb-sidebar class="ticketViewSideBar" right="true" > //some code here </nb-sidebar>