一個組件的 CSS 與使用 Angular 12 的另一個組件沖突

Question

角.json

"styles": [
    "./src/assets/css/base.css",
    "./src/assets/css/dashboard.css",
    "src/styles.css"
],

樣式.css

/* You can add global styles to this file, and also import other style files */
@import "~assets/css/base.css";
@import "~assets/css/dashboard.css";

應用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './component/front/home/home.component';
import { DashboardComponent } from './component/admin/dashboard/dashboard.component';
import { ProfileComponent } from './component/admin/profile/profile.component';
import { PagenotfoundComponent } from './component/front/pagenotfound/pagenotfound.component';

const routes: Routes = [

  { path:'', component:HomeComponent },
  { path:'admin/dashboard', component:DashboardComponent },
  { path:'admin/profile', component:ProfileComponent },
  { path:'**', component:PagenotfoundComponent }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上圖中，我在組件文件夾中有兩個模塊，即front和admin用於front我有base.css和admin我有dashboard.css並且當我提供 ng 命令時， front文件夾組件的布局會干擾，但是當我刪除dashboard.css從styles.css然后它工作正常。 同樣在管理文件夾組件的情況下。 那么，我該如何處理這個問題呢？ 請幫我。

謝謝你

Answer 1

在全局styles.css導入或聲明的任何css都被認為是全局的，例如最后聲明的樣式優先

您可以將樣式添加到與組件關聯並由組件導入的css ，或者繼續使用全局樣式但添加更具體的選擇器