一个组件的 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 ，或者继续使用全局样式但添加更具体的选择器