Dentro de mi componente de raíz de aplicación, tengo un componente de contenedor de aplicación. ¿Cómo diseñaría el componente del contenedor de la aplicación?
HTML:
<app-container></app-container>CSS:
app-container { background: red; }^ El css anterior no funciona.
Quiero diseñar y colocar el componente del contenedor de la aplicación. Intenté buscar en Google pero no pude encontrar una solución adecuada. Por favor ayuda.
¡Gracias por adelantado!
Sí hay. Si ha habilitado shadow-dom o la emulación de shadow-dom, puede diseñar la etiqueta a través de la propiedad :host. (La emulación está habilitada de forma predeterminada)
P.EJ
:host{ background-color:red; }Le recomiendo este artículo: https://angular.io/guide/component-styles
Su código css anterior debería funcionar si está en el archivo css global y no en el archivo css del componente.
No olvide comprobar la ruta styleUrl. Aquí un ejemplo de styleUrls.
@Component({ selector: 'hero-details', template: ` <h2>{{hero.name}}</h2> <hero-team [hero]=hero></hero-team> <ng-content></ng-content> `, styleUrls: ['app/hero-details.component.css'] }) export class HeroDetailsComponent { /* . . . */ }Aquí más detalles sobre emulado/nativo -shadow dom: https://angular.io/guide/component-styles#view-encapsulation