Изменение основного CSS на уровне компонента

Question

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

Я пытаюсь изменить стили PrimeNG в своем угловом приложении.

В моем компоненте я изменил класс * .ui-inputext PrimeNG.

    body .ui-inputtext {
    font-size: 0.8vw;
    padding:0;
    background-color: #557db1 !important;
}

Это работает, только когда я установил encapsulation:ViewEncapsulation.None в своем классе компонентов.

Я также пыталсяиспользование :host >>>

 :host >>>   body .ui-inputtext {
    font-size: 0.8vw;
    padding:0;
    color:red;
    background-color: #557db1 !important;
}

Проблема с использованием encapsulation:ViewEncapsulation.None в моем компоненте заключается в том, что он изменяет стили PrimeNGcontrols во всем приложении.

Я хочу сделатьизменения в элементе управления только для этого компонента, где я изменил класс CSS.

Есть ли что-то еще, что мне нужно сделать, или, может быть, я что-то здесь упускаю?

Эта проблема была поднята здесь на GitHub(https://github.com/primefaces/primeng/issues/1812), но он не отслеживался дальше.

Answer 1

Добавьте один класс в это поле ввода и попробуйте изменить css, используя этот класс, а не тело, и добавьте encapsulation: Viewencaptulation.None в ваш файл component.ts.Это не изменит другой компонент css.

Вот пример кода, который вы можете попробовать следующим образом:

<input type="text" class="field_input" pInputText placeholder="Username">

.field_input.ui-inputtext {
  font-size: 0.8vw;
  padding:0;
  background-color: #557db1 !important;
}

Stackblitz Link:

https://stackblitz.com/edit/angular-romzcu?embed=1&file=src/app/app.component.ts

Answer 2

Попробуйте с :host /deep/ в вашем css-файле компонента.