2

我在 Angular 应用程序中使用 Akveo Nebular UI 库和 Bootstrap，一切看起来都很完美，直到我在运行时更改主题。基本上，引导表不会更改字体颜色，因此它们不可读。例如，这是使用默认主题的表格的外观：

默认主题

当我切换到深色主题时，这是同一张表：

深色主题

我按照此处找到的 Nebular 的文章进行了修改app.component.scss，添加了以下行以在主题更改时自定义 Bootstrap 表样式：

@import '../../../../themes';

@include nb-install-component {
  table.table {
    font-family: nb-theme(font-family-primary);
    color: nb-theme(text-basic-color);
  }
}

然而，它并没有改变任何东西。我意识到，如果我修改包含任何表格的组件的 SCSS 文件，则会应用新样式。但是我有超过 15 个组件的表格，因此将上面的代码添加到每个组件并保持可能的样式更改会很痛苦。

有什么建议吗？谢谢！

4

2 回答 2

3

我为解决这个问题所做的是创建一个自定义表格组件，其中包含一个 Bootstrap 表格。这样，我可以nb-install-component在它的 SCSS 文件中使用，并且当我切换主题时，Nebular 会添加正确的类。总结一下：

1) 创建一个CustomTableComponent

2) HTML 模板里面会有一个 Bootstrap 表。为了能够将其用作普通表，请使用<ng-content>. 代码将类似于：

custom-table.component.html

  <table class="table table-hover">
    <ng-content></ng-content>
  </table>

3) 在组件样式文件中，使用nb-install-component并修改所需的规则以适应主题切换（在我们的例子中，只需要颜色）。这是我的方法：

custom-table.component.scss

  @import '../../themes';

  @include nb-install-component {
    table.table {
        font-family: nb-theme(font-family-primary);
        color: nb-theme(text-basic-color);  /* This will change the color when you switch the theme */
    }
  }

4) 现在，使用新app-custom-table组件代替 HTMLtable标记：

<app-custom-table>
  <thead>
    <tr>
      <th>#Id</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>Product name</td>
      <td>2,000€&lt;/td>
    </tr>
  </tbody>
</app-custom-table>

希望有帮助，加油！

于 2020-04-30T07:52:27.887 回答
0

我有同样的问题。总的来说，我发现 Nebular 的限制非常严格，如果你想要的不是开箱即用的东西，你应该准备好花费几个小时，因为文档非常有限，而且这个项目中的同行似乎非常吝啬提供任何帮助。请注意，Nebular 建议发布堆栈溢出问题，但这些问题通常被否决且没有得到回答。

我采取了不同的方法。在位于 app > @theme 的 Themes.scss 中，我首先尝试在 @include nb-install-component() {} 中添加代码，但这根本不起作用，我不知道为什么。

其次，我只是将样式代码 nb-theme(text-basic-color) 粘贴到文件底部的任何标签之外。这导致自定义 css 被触发，但是它不能正常工作，因为它使用的是黑色的基本/默认样式。切换主题时，颜色并没有切换为白色以表示黑暗。

我最终为每个主题制定了一个规则 .nb-theme-dark .table { font-family: nb-theme(font-family-primary); 颜色：白色！重要；/* 这会在你切换主题时改变颜色 */ }

我不明白为什么这很难开始工作以及为什么有时没有拿起 css，但由于没有多少人愿意帮助我的解决方案是解决并找到另一种方法。

于 2021-03-22T23:33:59.693 回答