Jaki jest najlepszy sposób nadpisania stylu komponentów primeng?

Chcę nadpisać styl komponentów primeng na poziomie komponentu, nie dla całej aplikacji, albo muszę zmienić styl w głównym pliku theme.css lub w stylu inline, ale wydaje się, że nie działa on tak, jak się spodziewano, niech przypuszczam, że jako przykład muszę używaćJaki jest najlepszy sposób nadpisania stylu komponentów primeng?

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

i muszę zmienić styl klasa ui-dropdown-item nazwy klasy wg dokumentacji.

Potrzebuję tego samego komponentu z dwoma stylami diff jaki jest najlepszy dla tego samego? jeśli ktoś ma działający przykład, proszę dodać link.

Źródło

2016-10-19 Pardeep Jain

Chcesz zawinąć komponent do elementu div za pomocą określonej klasy.

<div class="myOverride">

Teraz w style.css kierować elementowi primeng ten sposób:

.myOverride .ui-dropdown-item {...}

ten sposób tylko owinięty komponent pobiera stylem.

Źródło

2016-10-19 12:50:07

Po pierwsze dziękuję za odpowiedź, tak naprawdę to nie działa również to nie jest najlepszy sposób, czy jest jakaś inna opcja dla tego samego? –

Ponieważ Angular używa teraz emulowanego ViewEncapsulation, ta metoda nie będzie działać w niektórych przypadkach, w tym gdy komponent generuje elementy w środowisku wykonawczym. Rozwiązałem ten problem za pomocą: hosta i/deep/selektorów. : host wybiera element główny składnika i/deep/stosuje selektory podrzędne do każdego elementu podrzędnego. Więcej szczegółów na: host i/deep/here: https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors To, jak wygląda to w praktyce, jest po prostu dodanie: host:/deep/do selektora nadrzędnego w pliku .scss twojego komponentu. – jmcmichael

@jmcmichael Próbuję przesłonić style predefiniowanego komponentu w moim komponencie niestandardowym i jak zauważyłeś, predefiniowany komponent generuje elementy w czasie wykonywania. Jak mogę nadpisać styl tych elementów z mojego komponentu? – Nitesh

Wyłącz hermetyzacji w widoku komponentu, a następnie dodać style,

@Component({ 
selector: 'new-employee-flow', 
templateUrl: './app/components/my.html', 
styleUrls: ['./app/components/my.css'], 
encapsulation: ViewEncapsulation.None 
})

Źródło

2017-03-07 15:06:06 velsim

Robiąc to, musisz stylizować każdy komponent za każdym razem, gdy go używasz, jest to zbyt długi i nieodpowiedni proces. –

Zbyt trudne jako rozwiązanie –

Jedynym sposobem na to, że jestem świadomy jest za pomocą zrobić: host i :: NG-głębokie, zwany "kombinatory CSS z przebijaniem cienia"

Możesz włączyć ViewEncapsulation.Native, aby zastosować DOM Cienia, ale nie rozumiem jeszcze, że jest ono dobrze obsługiwane. Obsługują go Chrome i Safari, myślę, że Firefox może tam być, ale IE wciąż jest daleko od dodania tej funkcji.

Dobry artykuł na temat widoku enkapsulacji w kanciastym here, a także dobry wpis dotyczący przekłuwania w cieniu here. Możesz również przejrzeć dokumentację na ten temat od zespołu Angulara here

W mojej aplikacji używam również PrimeNG. Ponieważ importuję komponent primeNG do, powiedzmy, że MyComponent, oznacza to, że style zastosowane do MyComponent będą enkapsulowane i nie zastosują się do elementów primeNG UI im. Kombinatory przenikania cienia pozwalają mi na "przebicie" przez "emulowany" DOM Cieni Angulara, aby nadać stylu PrimeNG, ale wydaje się trochę niechlujny i nie idealny. Szukałem tego sposobu, ale nic nie wiem.

Źródło

2017-04-21 20:59:24 Dave

Każdy element jest wyposażony w zestaw klas stylizacji, wykorzystując je można modyfikować style, na przykład

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

i odpowiadający mu styl będzie tak

.ui-dropdown { 
    background-color:black; 
} 
.ui-dropdown-label { 
    color:white; 
} 

.ui-dropdown-label:hover{ 
    color:red 
} 
.ui-dropdown-item { 
    color:white; 
    background-color:black; 
}

LIVE DEMO

Źródło

2017-04-21 21:48:47 Aravind

Jak sprawić, by komponenty Primeng, takie jak rozwijane i pola tekstowe zawarte w elementach były przezroczyste ?. Kolor tła td da kolor elementowi primengemu –

Twoje rozwiązanie nie działa, nowe style są w głównym stylu.css, szukam również, aby zmienić style primeng z komponentu pliku kątowego , który wstrzykuje styl w głowę – jcdsr

czy miałeś szansę przyjrzeć się 'Live Demo' – Aravind

Spróbuj użyć

: host >>> .ui-dropdown-item {...}

Nie będziesz potrzebować żadnego otoczonego elementu div lub dodającego style do stylu głównego.css

Źródło

2018-01-03 15:11:04 jcdsr

Jaki jest najlepszy sposób nadpisania stylu komponentów primeng?

Odpowiedz

Powiązane problemy