Applicare stile css a tutti i componenti in angolare 2 app

Ho regole CSS molto semplici, e riutilizzabili, come ad esempio:Applicare stile css a tutti i componenti in angolare 2 app

.ng-invalid { 
    border-left: 5px solid #a94442; 
} 

.ng-valid { 
    border-left: 5px solid #42A948; 
}

mi piacerebbe ri-utilizzare questi per tutti i miei componenti. Se lo metto nella mia radice AppComponent, che è quello che viene avviato da Angular, non viene riconosciuto da nessun altro componente nella mia applicazione diverso da AppComponent.

Mi manca qualcosa di molto ovvio qui.

fonte

2016-04-14 mariocatch

Probabilmente dovresti dichiarare le regole css globali nel tuo html o foglio di stile esterno.

fonte

2016-04-14 20:44:22 kemsky

Indovinate stavo pensando troppo ** Angular ** su questo. Sì, hai ragione haha. – mariocatch

È possibile raggiungere questo mio cambiare il vostro stile di

:host .ng-invalid { 
    border-left: 5px solid #a94442; 
} 

:host .ng-valid { 
    border-left: 5px solid #42A948; 
}

e nelle vostre componenti figlio è possibile impostare la proprietà di encapsulation: ViewEncapsulation.None (ma per impostazione predefinita è ViewEncapsulation.None quindi potrebbe essere necessario impostare anche).

così ora si dovrebbe essere in grado di utilizzare la classe di stile in tutti i componenti figlio.

Demo: http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview

fonte

2016-04-14 21:31:55 sreeramu

angolare aggiunge classi uniche per il componente e riscrive i selettori CSS aggiunti componenti di corrispondere solo che i componenti classe unica, prima di aggiungere il CSS al <head>. Questo per emulare l'incapsulamento in stile DOM ombra.

si può lavorare intorno ad esso da

impostare encapsulation: ViewEncapsulation.None che impedisce la riscrittura stili per i componenti in cui l'incapsulamento è disabilitata
aggiungere il CSS al index.html direttamente. Angolare non riscrive i CSS che non vengono aggiunti ai componenti.
utilizzare "shadow piercing CSS combinator" * >>> someSelector { ... } che inoltre ignora le classi univoche aggiunte ai componenti.
Suggerimento: /deep/ è un alias >>> ma funziona meglio con SASS.

fonte

2016-04-15 05:38:47

Da una riga di comando run:

NPM file di installazione-loader --save-dev

Ora in webpack.config.js stile-loader aggiungere la seguente riga alla matrice caricatori:

{test: /\.(eot|woff2|woff|ttf|svg)/, caricatore: 'File-loader'}

Ora nelle vostre app.component.ts, dopo le sue dichiarazioni di importazione, aggiungi la seguente riga:

require ('style! Bootstrap/dist/css/bootstrap.css')

Ciò presuppone che si sta utilizzando l'ultima versione di angular2/angular2-seme si trova qui: https://github.com/angular/angular2-seed come di 8 Nov 2016

fonte

2016-11-08 10:08:35 SlimSim

A mio parere si dovrebbe accettare di una particolare strategia in questa materia attraverso la vostra intera squadra.

E.g. è possibile impostare encapsulation: ViewEncapsulation.None proprio come @sreeramu menzionato nella sua risposta. Ma solo per componente app (root).

È consigliabile sfruttare l'incapsulamento CSS il più possibile, quindi disattivarlo per diversi componenti è un po 'puzzolente. Ma applicarlo solo a un componente potrebbe funzionare correttamente.

fonte

2017-03-29 07:34:39 marekozw

scrivi tu CSS all'interno src/styles.css

oppure è possibile creare il nuovo file CSS e specificare all'interno .angular-cli.json file di

"apps": [ 
    "styles": ["styles.scss"] 
]

fonte

2017-07-06 06:47:41

Applicare stile css a tutti i componenti in angolare 2 app

risposta

Problemi correlati