Angular 6 alterante way to global css

Question

I'm using Handsontable in one of my component, and it forces me to include it's css globally in my angular.json file

"styles": [
         "./src/styles.scss",
          "./node_modules/handsontable/dist/handsontable.full.css"
       ],

and it affects my calendar component all over my application. How can i include this css only for that handsontable component and disable it for all other components.

writing import in handsontable component scss file doesn't work.

Thanks in Advance.

Answer 1

This works as below. Pay attention to encapsulation: ViewEncapsulation.None. This will disable default Emulated DOM, so that styles of this component, will be applicable to children as well. Other wise, by default Emulate DOM, protects scopes of each component (that is why it was not working in your case).

Refer to documentation also.

However, that won't fix your problem actually. Because, as per documentation:

[ViewEncapsulation] None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

What effectively means, that the output will be in global scope any way.

So probably it is easier just add once in your main styles.scss:

@import '~/handsontable/dist/handsontable.full.css';

Working with ViewEncapsulation.None encapsulation.

// component.ts
@Component({
  selector: 'app-table',
  template: `<hot-table ....></hot-table>`,
  styleUrls: ['./table.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TableComponent {
...
}

// component.scss
@import '~/handsontable/dist/handsontable.full.css';