angular - 交换 Nebular 主题时更改 Bootstrap 表字体颜色

Question

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

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

我关注Nebular的文章发现here我修改了 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 个组件，因此将上面的代码添加到每个组件并维护可能的样式更改将是一件很痛苦的事情。

有什么建议吗？谢谢!

Answer 1

我为解决这个问题所做的就是创建一个自定义表格组件，其中包含一个 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 包裹起来并修改所需的规则以适应主题切换(在我们的例子中，只需要颜色)。我的做法如下:

自定义表.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>

希望对你有帮助，干杯!