时间戳

首页 > 解决方案 > Angular 5 自定义 CSS

css - Angular 5 自定义 CSS

问题描述

嘿，伙计们，我正在努力弄清楚如何为不同页面的元素添加自定义样式如果我将样式添加到全局 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>

任何帮助表示赞赏

标签： cssangularangular5carouselprimeng

解决方案

让我们先了解您的查询 -

您想在不同的地方更改元素或组件的 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

推荐阅读