css - Angular 5 自定义 CSS

Question

大家好，我正在努力弄清楚如何为不同页面的元素添加自定义样式如果我将样式添加到全局 css，它就可以工作。例如，我在三个不同的页面上使用 ui-carousel，我需要它们在每个页面上看起来都不同，所以在这种情况下全局对我不起作用如果我在我的个人 css 页面中放置一个 div 类，它可以正常工作，因为我可以命名该类。

<h3 style="margin-left: 20px;">Fotos</h3>
<p-carousel numVisible="4"
        [value]="_photos">
            <ng-template let-p pTemplate="p">
                <p>
                    <img style="    width: 100%;
                    padding: 4px;
                    /* margin: auto; */
                    border: 1px solid #ddd;"
                         [src]="p.photo">
                </p>
            </ng-template>
   </p-carousel>

感谢任何帮助

Answer 1

让我们先了解您的查询 -

您想在不同的地方更改元素或组件的 css 样式。

为此，您可以选择以下选项 -

@Input 内联 CSS

如果您想要更新的属性很少，那么您可以选择内联 css。

@Input 样式类

如果您有一组要应用到组件上的主题，那么您可以使用 CSS Class 选项作为 @Input

还有一些更高级的选项，例如 Dynamic Template，但我认为您不需要那个。

覆盖 CSS

要覆盖 css，您可以使用 :host 或 :host::ng-deep

例子:

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

或

:host ::ng-deep .ui-dropdown-item {...}

您可以在此处查看实际演示 - https://stackblitz.com/edit/angular-wz8iq4