更换 Nebular 主题时更改 Bootstrap table 字体颜色

Question

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

当我切换到深色主题时，这也是相同的table：

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

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

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

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

有什么建议吗？谢谢！

Answer 1

我为解决这个问题所做的是创建一个自定义 table 组件，将 Bootstrap table 包裹在里面。这样，我就可以在它的SCSS文件中使用nb-install-component，Nebular在我切换主题时添加正确的类。总结：

1) 创建一个 CustomTableComponent

2) HTML 模板内部会有一个 Bootstrap table。为了能够像普通 table 一样使用它，请使用 <ng-content>。代码类似于：

自定义-table.component.html

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

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

自定义-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 组件代替 HTML table 标签：

<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€</td>
    </tr>
  </tbody>
</app-custom-table>

希望对你有帮助，干杯！

Answer 2

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

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

其次，我只是将样式代码 nb-theme(text-basic-color) 粘贴到文件底部的任何标签之外。这导致自定义 css 触发，但它无法正常工作，因为它使用的是黑色的 base/default 样式。切换主题时，颜色没有切换为白色为深色。

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

我不明白为什么上班这么难，为什么有时 css 没人接，但由于愿意帮助我的人不多，我的解决方案是变通并找到另一个方式。

更换 Nebular 主题时更改 Bootstrap table 字体颜色

Change Bootstrap table font colors when swapping Nebular theme

angular

nebular