PrimeNg styleClass не меняет стиль p-панели - PullRequest
Новая
       10

PrimeNg styleClass не меняет стиль p-панели

0 голосов
/ 18 сентября 2018

Я использую PrimeNg.Мои файлы .html и .scss, как показано ниже.Но я не могу дать никакого styleClass для p-панели.Что не так в моем коде?

.html файл 

<p-panel header="Student Info" styleClass="test">
    <div class="ui-g">
      <div class="ui-g-12 ui-md-3">
        <div class="ui-g-12">
          <b>Student</b>
        </div>
       </div>
  </p-panel>

.scss файл 

.test {
  margin-top: 50px;
}

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Еще одно решение - использовать родительский элемент элемента <p-panel>.Таким образом, 

<div class="panel-container">
   <p-panel>
     ..
   </p-panel>
 </div>

Мы могли бы просто иметь класс:
.panel-container div.ui-panel-titlebar { .. }
и / или
.panel-container div.ui-panel-content { .. }
Кстати, чтобы исправить проблему @ HasanOzdemir, мы могли бы простодобавить немного отступа к верху родительского элемента; -)

0 голосов
/ 18 сентября 2018

Чтобы применить стиль CSS к дочернему компоненту, используйте ::ng-deep.См. this stackblitz для демонстрации. 

:host ::ng-deep .test {
  margin-top: 50px;
}

Согласно Угловая документация :

Стили компонентов обычно применяются только к HTMLв собственном шаблоне компонента.

Используйте комбинатор потомков / deep / shadow-piercing для принудительного перемещения стиля вниз по дереву дочерних компонентов во все представления дочерних компонентов.Комбинация / deep / combinator работает с вложенными компонентами любой глубины и применяется как к дочерним элементам представления, так и к дочерним элементам содержимого компонента.

Используйте / deep /, >>> и :: ng-deep только сэмулируемый вид инкапсуляции.Эмуляция используется по умолчанию и является наиболее часто используемой инкапсуляцией представлений.

... :: ng-deep следует предпочитать для более широкой совместимости с инструментами.

Альтернативное решение состоит в том, чтобы установить представление инкапсуляции компонента на ViewEncapsulation.None.

Другой альтернативой является глобальное определение стиля в styles.css, как показано для второгопанель в stackblitz .

...