时间戳

首页 > 解决方案 > 是否可以在 scss 中使用来自 Angular 服务的样式？

css - 是否可以在 scss 中使用来自 Angular 服务的样式？

问题描述

我有一个 change-color.service.ts 具有以下内容：

public defaultStyles = {
    firstDesignBackgroundColor: '#a31329',
    firstDesignFontColor: '#ffffff',
    secondDesignBackgroundColor: '#d1cfcfff',
    secondDesignFontColor: '#000000'
  };

现在我想在我的 style.scss 中添加声明

:host ::ng-deep th span#optimize-checkbox-header .mat-checkbox label.mat-checkbox-layout .mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin .mat-checkbox-frame {
  border: 2px solid #fff !important;
}

将替换#fff为。你知道我如何创建这个依赖吗？这可能吗？firstDesignFontColorchange-service

标签： cssangulartypescriptsass

解决方案

实际上有一种方法可以使用 css 变量来实现它，我将在此处发布作为第二个答案。

您可以从 JavaScript 代码更改 css 变量，因此如果您使用类的变量，如这个简化的示例：

:root {
  --bg-color: red;
}

.test {
  background-color: var(--bg-color);
}

然后你可以从你的 ChangeColorService 中改变它

interface Colors {
  background: string;
}

@Injectable()
export class ChangeColorService {
    colors$ = new BehaviorSubject<Colors>({ background: 'red' });

    constructor(@Inject(DOCUMENT) private document: Document) { }

    change(colors: Colors) {
      const root = this.document.documentElement;
      root.style.setProperty('--bg-color', colors.background);
      this.colors$.next(colors);
    }
}

完整示例： https ://stackblitz.com/edit/angular-change-css-variable?file=src/app/app.component.ts

推荐阅读