Angular 5 个自定义 CSS

Question

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

<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

您可以为您创建的每个组件设置对应的样式-sheet。在声明组件时指定要为组件使用的样式sheet：例如

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

您可以使用 styleUrls 数组为一个组件设置多个样式sheet。

希望对您有所帮助！

Answer 2

如果@alokstar 的回答不是您所需要的，我想您可能需要稍微解释一下您的问题，因为我也会这样做。

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

p-carousel { <some css styling>; }

我觉得这篇文章link也解释得很好。

Answer 3

请看这个link Apply CSS Style to child elements

可能的解决方案是将自定义 class 名称应用于 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; 
}

Answer 4

让我们先了解您的查询 -

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

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

`@Input` 内联 css

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

`@Input` 风格 Class

如果您有一组要应用到组件上的主题，那么您可以使用 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

Angular 5 个自定义 CSS

Angular 5 Custom CSS

css

carousel

primeng

angular

angular5

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

`@Input` 内联 css

`@Input` 风格 Class

覆盖CSS

Angular 5 个自定义 CSS

Angular 5 Custom CSS

css

carousel

primeng

angular

angular5

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

@Input 内联 css

@Input 风格 Class

覆盖CSS

`@Input` 内联 css

`@Input` 风格 Class