How to force application of styles for the https://github.com/mariohmol/ang-jsoneditor component in my angular app

Question

I would like to enhance our application with the aforementioned JSON editor however it appears that there are layers of material and bootstrap styling that are taking precedent over the angular components style resulting in an unusable interface. My goal is to get the standard styles to apply.

I have tried the following the following:

• style.css:

  • adding '@import "~jsoneditor/dist/jsoneditor.min.css";'
  • adding '@import url("~jsoneditor/dist/jsoneditor.min.css";)'
  • inlining the style sheet and associated assets

• component-parent.scss:

  • adding '@import "~jsoneditor/dist/jsoneditor.min.css";'
  • adding '@import url("~jsoneditor/dist/jsoneditor.min.css";)'
  • inlining the style sheet and associated assets

I have also setup the demo project where the UI renders correctly and compared its styling to that of the same component in my application and confirmed a lack of styling is the root cause of the problem. Below are images of the UI and failing code css:

UI without style CSS without style

Steps to get a working example of the ang-jsoneditor on your local host:

1. git clone https://github.com/mariohmol/ang-jsoneditor.git
2. npm run start
3. navigate to "http://localhost:4200"

4. Open your devtools, highlight a json editor component and see in the styles pane the jsonedior styles such as :

   div.jsoneditor-menu>button.jsoneditor-expand-all {
       background-position: 0 -120
   }
   

My expectation was that if I locally applied the style in parent-component.scss that it would be applied. Due to the multi-module nature of the project there is a distinct possibility that all the steps preformed before where executed partially in error due to unknown conventions. With that said, if that was the case I would have expected to at least see the color styles when the style sheet was added to parent-componenet.scss. For this reason I believe it is my ignorance of css precedent issues that is causing the problem.

** Update **

So I read this link on overriding child angular component styling which helped me to understand that child components are fully encapsulated by default so my local changes in parent-component will not effect the child without using a piercing style or ng-deep. This indicates to me that there is a problem with the module or how ang-json-editor module's assets are registered. I did test using ng-deep and it did effect change on the component but I would have to update the entire 2000 line style sheet so it is not an acceptable work around.

Answer 1

The root cause of the missing css and its subsequent fix is unknown however I was able to implement a workaround based on the suggestion of Joel Joseph by hacking the ang-jsoneditors encapsulation and then styling the component in the parent's scss file.

Below are the steps:

1. In parent-component.ts:

   a. Import the ViewEncapsulation module: "import { ViewEncapsulation, ... } from '@angular/core';"

   b. Set the ViewEncapsulation to None:

   @Component({
       selector: 'parent',
       templateUrl: './parent.component.html',
       styleUrls: ['./parent.component.scss'],
       encapsulation: ViewEncapsulation.None
   })
   

2. Add your css to the component:

   a. Add your css. For this case just copy and paste it from the source.

3. Add your assets to the project:

   a. In this case create a folder named "img" that is at the same level as parent.component.scss

   b. Copy the svg icon asset into your "img" folder.

This resolved my styling problems as a temporary fix. I will update with a permanent solution if/when it is implemented.