在 angular 中使用带有线性渐变 CSS 的自定义 material 主题

Question

我尝试在 angular 网络应用中使用 CSS 线性渐变属性中的自定义主题。我的 styles.css 看起来像这样：

@include mat.core();

@mixin component-theme($theme) {

    $my-theme-primary: map-get($theme, primary);
    $my-theme-accent: map-get($theme, accent);
    $my-theme-warn: map-get($theme, warn);

    $color-fond-titre: mat.get-color-from-palette($my-theme-primary, 100);
    $color-titre : mat.get-color-from-palette($my-theme-primary, darker);
    $color-panel: mat.get-color-from-palette($my-theme-primary, darker-contrast);


    $color-fond-titre-accent: mat.get-color-from-palette($my-theme-accent, 100);
    $color-titre-accent: mat.get-color-from-palette($my-theme-accent, darker);
    $color-panel-accent: mat.get-color-from-palette($my-theme-accent, darker-contrast);

    .active-selection
    {
        background-color: mat.get-color-from-palette($my-theme-primary, 500) !important;
        color: mat.get-color-from-palette($my-theme-primary, darker-contrast) !important;
    }

    .card-container-background
    {
        background-image: linear-gradient(70deg, mat.get-color-from-palette($my-theme-primary, darker-contrast) , mat.get-color-from-palette($my-theme-primary, 100))
                  url('assets/icons/store-cloth.png');
    }

我想在这样的模板中使用 class“card-container-background”:

<div id="zone-utility-container">
    <mat-card class="card-container-background">
---------------------------------------------------
    </mat-card>    
</div>

这段代码有什么问题？感谢您的帮助

Answer 1

您的背景图像定义不是有效的 CSS 值，每个选项都必须用逗号分隔，因此在您的情况下，您必须在 linear-gradient(... ) 像这样：

.card-container-background
{
    background-image: linear-gradient(70deg, mat.get-color-from-palette($my-theme-primary, darker-contrast) , mat.get-color-from-palette($my-theme-primary, 100)),
              url('assets/icons/store-cloth.png');
}

在 angular 中使用带有线性渐变 CSS 的自定义 material 主题

Using custom material theme with linear gradient CSS in angular

css

angular

themes