CSS of one component is conflicting with another component using angular 12

Question

angular.json

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

styles.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";

app-routing.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 { }

In the above image I have two module inside component folder ie front and admin for front I have base.css and for admin I have dashboard.css and when I serve ng command the layout of front folder component disturb but when I remove dashboard.css from styles.css then it working fine. Similarly In case of admin folder component. So, How can I manage this issue? Please help me.

Thank You

Answer 1

Any css that's imported, or declared, in the global styles.css is considered global eg last style declared takes precedence

You can add the styles to the css associated with and imported by the components, or else continue using the global styles but add more specific selectors