Angular 5 Custom 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 类选项作为@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

Answer 2

您可以拥有与您创建的每个组件对应的样式表。指定在声明组件时要用于组件的样式表： 例如

@Component({
selector: 'your-component-selector',
templateUrl: './your-component.html',
styleUrls: ['./your-component.css']
})

您可以使用styleUrls数组为一个组件创建多个样式表。

希望对您有所帮助！

Answer 3

如果@alokstar的答案不是你需要的，我认为你可能需要稍微解释一下你的问题，因为这也是我的做法。

如果你每个组件都有一个CSS文件，加上全局文件，并且你指定了要在哪个组件中使用的样式表，就不会有问题。

p-carousel { <some css styling>; }

我认为这篇文章链接也很好地解释了它。

Answer 4

请参阅此链接 将 CSS 样式应用于子元素

可能的解决方案是将自定义类名应用于div 包装器或元素本身上的每个实例。您可能还需要应用 ：：ng-deep，但最终您需要某种标识符来使它们成为您想要应用的 css 的唯一 1：1。

<p-carousel class="classInstance1 " numVisible="4"
p-carousel.classInstance1 .ui-carousel { 
position: relative !important; 
padding: 0.683rem !important; 
border: none !important; 
background: white !important; 
} 
p-carousel.classInstance2 .ui-carousel { 
position: relative !important; 
padding: 0.683rem !important; 
border: none !important; 
background: green !important; 
}