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?

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