Измените цвета шрифта таблицы Bootstrap при замене темы Nebular

Я использую библиотеку пользовательского интерфейса Akveo Nebular и Bootstrap в приложении Angular, и все выглядит идеально, пока я не изменю тему во время выполнения. По сути, таблицы Bootstrap не меняют цвет шрифта, поэтому они нечитаемы. Например, так выглядит таблица с темой по умолчанию:

Тема по умолчанию

И это та же таблица, когда я переключаюсь на темную тему:

Темная тема

Я следил за статьей Небулара, найденной здесь и я изменил 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 компонентов, поэтому было бы сложно добавить приведенный выше код к каждому из них и поддерживать возможные изменения стиля.

Любое предложение? Спасибо!


angular nebular
person Fel    schedule 12.11.2019    source источник
comment
Вы используете nb-layout? Он отвечает за переключение тем. Если да, убедитесь, что элемент body имеет класс темы для текущей темы.   -  person ArtemRomanovsky    schedule 27.12.2019
comment
Привет! Да, я использую nb-layout в основном компоненте. Когда я меняю тему, тег body получает класс nb-theme-XXXX. В любом случае, я нашел решение для своих нужд, отправлю ответ, когда у меня будет немного времени.   -  person Fel    schedule 27.12.2019
comment
@Fel Можете ли вы добавить решение, у меня такая же проблема :)   -  person Maraboc    schedule 30.04.2020

Ответы (2)


arrow_upward
3
arrow_downward

Для решения этой проблемы я создал настраиваемый компонент таблицы, который обертывает внутри таблицу 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 вместо 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>

Надеюсь, это поможет, ура!

person Fel    schedule 30.04.2020

arrow_upward
0
arrow_downward

У меня была точно такая же проблема. В общем, я обнаружил, что Nebular очень ограничивает, и если вы хотите чего-то другого, кроме того, что выдается из коробки, вы должны быть готовы потратить часы, потому что документация очень ограничена, а участники этого проекта, похоже, очень скупы на предоставление любая помощь. Обратите внимание, что Nebular рекомендует публиковать вопросы о переполнении стека, однако они часто не получают ответов и не получают ответов.

Я использовал другой подход. В моем themes.scss, расположенном в app ›@theme, я сначала попытался добавить код внутри @include nb-install-component () {}, однако это вообще не сработало, и я не уверен, почему.

Во-вторых, я просто вставил код стиля nb-theme (text-basic-color) вне каких-либо тегов внизу файла. Это привело к срабатыванию настраиваемого css, однако он не работал должным образом, потому что использовал черный стиль base / default. При переключении темы цвет не менялся на белый на темный.

Я закончил с правилом для каждой темы .nb-theme-dark .table {font-family: nb-theme (font-family-primary); цвет: белый! важно; / * Это изменит цвет при переключении темы * /}

Я не понимал, почему с этим было так сложно приступить к работе и почему иногда css не запускается, но из-за нехватки людей, желающих помочь, мое решение - обойтись и найти другой способ.

person Kyle Waid    schedule 22.03.2021