Prevent global CSS being applied a component in Angular 5

Question

In .angular-cli.json, I got some global styles:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.scss"
    ],

But I don't want any of them being applied to a specific component - is it achievable?

EDIT 1:
Unfortunately, overriding the CSS style in the component style won't work because the HTML in the template of the component is fetched from a Web API backend - I guess I can't realistically override every possible class/selector?

Eaten

You can define component specific styles using style template or style metadata corresponding to your component , that should override the global style. – Vandenberg

@Vandenberg Question updated. – Eaten

Have a Look at this – Problematic

Answer 1

CSS cascades (hence the term, Cascading Style Sheets). for full browser support your only option is to override selectors.

another option, not as common due to lack of support on IE and Edge, is the all property.

html

<div class="component-container">
  <!-- your components html template ... -->
</div>

css

.component-container {
  all: initial;
  all: unset;
}

Expugnable

Answer 2

You can use angular built in shadowDom API from view encapsulation. Which will make your component elements loaded inside a separate DOM tree so global css wont affect your component elements.

   @Component({
  selector: 'app-root',
  template: `
    <h1 class="head-app">Test Heading</h1>      
  `,
  styles: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
/* . . .

Abominable

Works perfectly! Why is this not the accepted answer? – Whereupon

Answer 3

Using component styles For every Angular component you write, you may define not only an HTML template, but also the CSS styles that go with that template, specifying any selectors, rules, and media queries that you need.

One way to do this is to set the styles property in the component metadata. The styles property takes an array of strings that contain CSS code. Usually you give it one string, as in the following example:

@Component({
  selector: 'app-root',
  template: `
    <h1>Test Text</h1>      
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class AppComponent {
/* . . . */
}

styleUrls
One or more URLs for files containing CSS stylesheets to use in this component.

styleUrls: string[]

styles
One or more inline CSS stylesheets to use in this component.

styles: string[]

Lentic

Answer 4

You can use the :not selector in your global CSS.

You'd have to play around with it to get the desired behaviour but it should be something like this:

h1:not(.my-specific-class) {
  font-size: 3rem;
}

Kanarese

Hey, any example on how to not use h1 for specific component? – Anhinga

Answer 5

You can define styles at component level using styleUrls property inside the scope of @Component. Please have a look at below code:-

@Component({
selector: 'app-manageUser',
templateUrl: './manageUser.component.html',
styleUrls: ['./manageUser.component.css'],
providers: [UserService]
})

Copeck