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

user_15667645 0
Viewed 51

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 { }

enter image description here

In the above image I have two module inside component folder i.e. 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

angular12 angular css html
1 Answers

Any css that's imported, or declared, in the global styles.css is considered global e.g. 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

user_2710120
Related