How to change the style of an NgPrime component?

Question

I want to take the CSS values ​​that are in the .myclass class:

<style>
    .myclass {
        /* padding-right: 1.5em; */
        border: 0;
        background-image: linear-gradient(#034076, #034076), linear-gradient(#D2D2D2, #D2D2D2) !important;
        background-size: 0 2px, 100% 1px !important;
        background-repeat: no-repeat !important; 
        background-position: center bottom, center calc(100% - 1px) !important;
        background-color: transparent !important;
        transition: background 0s ease-out !important;
        float: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        font-weight: 400 !important;
        border: none;
    }  
</style>

<p-autoComplete class="myclass" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [inputStyleClass]="myclass" [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name"  [minLength]="1"></p-autoComplete>                                            

Answer 1

about writing the css of the prime component, but add the body selector as well

 body .ui-autocomplete .ui-autocomplete-input {
                                                    /* padding-right: 1.5em; */
                                                    border: 0;
                                                    background-image: linear-gradient(#034076, #034076), linear-gradient(#D2D2D2, #D2D2D2) !important;
                                                    background-size: 0 2px, 100% 1px !important;
                                                    background-repeat: no-repeat !important; 
                                                    background-position: center bottom, center calc(100% - 1px) !important;
                                                    background-color: transparent !important;
                                                    transition: background 0s ease-out !important;
                                                    float: none !important;
                                                    box-shadow: none !important;
                                                    border-radius: 0 !important;
                                                    font-weight: 400 !important;
                                                    border: none;
                                                }  

then in app.component import the ViewEncapsulation of angular core

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

and in @component

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    encapsulation: ViewEncapsulation.None
})

this is the initial component

and this is the component with the css changed this is the component with the css changed

Answer 2

try using this

[styleClass]="'myclass'"