Стили, применяемые не на уровне компонентов, а на глобальном уровне

Я использую компоненты ngPrime, и если я их стилизую, стили не применяются к файлу dashboard.component.sass, но они применяются, когда я использую глобальный файл style.sass.

файл dashboard.component.html

<p-dropdown [options]="reports" styleClass="report-dropdown">
      <ng-template let-item pTemplate="selectedItem">
        <i class="fas fa-th" style="fill: white;"></i>
        <span style="vertical-align:middle">
          {{item.label}}</span>
      </ng-template>
    </p-dropdown>

dashboard.component.scss и глобальный файл style.scss

.report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}
Источник

2 ответа

Решение

Если вы хотите установить стиль в вашем компоненте, вам просто нужно использовать ng-deep перед правилом, которое вы хотите применить.

https://angular.io/guide/component-styles

Это действительно не рекомендуется, но пока нет замены, так что вы можете использовать его сейчас

dashboard.component.scss

::ng-deep .report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}

Я не знаю primeng, но я раздвоил старый стек, показывающий изменение цвета (раскрывающийся список не открывается в примере, хотя)

https://stackblitz.com/edit/primeng-bootstrap-ylpzwd?file=app/app.component.scss

Другое решение

Другое решение - установить стиль в вашей глобальной таблице стилей. Это будет работать при условии, что ваши правила CSS более конкретны, чем те, которые применяются по умолчанию в ngPrime

Источник

По умолчанию стили компонентов Angular имеют область действия, влияющую на представление компонента. Это означает, что написанные вами стили повлияют на все элементы в вашем шаблоне компонента. Они не повлияют на элементы, которые являются дочерними элементами других компонентов в вашем шаблоне. Подробнее об инкапсуляции представлений можно прочитать в документации Angular.

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

  • (Как вы уже упоминали) Добавьте переопределяющий стиль в свою глобальную таблицу стилей. Настройте область действия селекторов так, чтобы они влияли только на те элементы, которые вам нужны.
  • Отключите инкапсуляцию представления для вашего компонента. Если вы сделаете это, убедитесь, что ваши стили имеют соответствующую область действия, иначе вы можете случайно нацелиться на другие компоненты в другом месте вашего приложения.
  • (Не рекомендуется) Используйте устаревший комбинатор потомков, проникающий в тень, чтобы заставить стили применяться ко всем дочерним элементам. Подробнее об этом устаревшем решении читайте в документации Angular.
Источник
Другие вопросы по тегам