根据 Angular 中选定的主题（在 ui 中选定）更改 css class 的属性 8

Question

我有一个 Angular 8 应用程序，而用户可以在 ui 中的两个不同主题之间切换。我在 div 上有一个 class，我希望每个主题的背景颜色都不同。但是我做不到。

也许这里有人做过类似的事情？

Myapp.component.html

<div class="ui-layout">
    <div class="card">
        <div class="wrapper">


        </div>
    </div>
</div>

Myapp.component.scss

.card {
  background-color: #ffffff;
}

.black-blue-theme {
    .card { 
    background-color: #424242 !important;
    }
}

app.component.ts

  ngOnInit() {
        this.componentCssClass = 'light-indigo-theme';
        themes.current('generic.light');
        this.setupOverlayContainer();
        this.subscribeToObservableFooter();

    }

    setupOverlayContainer() {
        const containerElement = this.overlayContainer.getContainerElement();
        if (containerElement) {
            const classList = this.overlayContainer.getContainerElement().classList;
            const toRemove = Array.from(classList).filter((item: string) =>
                item.includes('-theme'),
            );
            classList.remove(...toRemove);
            classList.add(this.componentCssClass);
        }
    }

    changeTheme(type: string) {
        this.componentCssClass = type;
        if (type === 'black-blue-theme') {
            themes.current('generic.dark');
        } else {
            themes.current('generic.light');
        }
        this.setupOverlayContainer();
    }

Answer 1

您有两个主题，默认情况下应使用其中一个。好的，让我们做一个类似的东西。

app.component.ts

currentTheme: string = 'generic.dark';

changeTheme(type: string) {
    this.currentTheme = type;
}

app.component.html

<div class="ui-layout" [ngClass]="currentTheme">
    <div class="card">
        <div class="wrapper">


        </div>
    </div>
</div>

Answer 2

解决了。只需要编辑 app.component.scss 而不是我的app.component.scss

app.component.scss

.black-blue-theme {
    .card { 
    background-color: #424242 !important;
    }
}

根据 Angular 中选定的主题（在 ui 中选定）更改 css class 的属性 8

Change properties of a css class based on selected theme (selected in the ui) in Angular 8

css

angular

sass

angular8

theming