如何在我的角度应用程序中强制应用https://github.com/mariohmol/ang-jsoneditor组件的样式

Question

我想用前面提到的JSON编辑来增强我们的应用程序，但是似乎有很多层的材料和引导样式比角组件样式更有先例，导致了一个无法使用的界面。我的目标是得到标准样式的应用。

我尝试了以下几点：

• style.css：

- adding '@import "~jsoneditor/dist/jsoneditor.min.css";'
- adding '@import url("~jsoneditor/dist/jsoneditor.min.css";)'
- inlining the [style sheet](https://github.com/josdejong/jsoneditor/blob/master/dist/jsoneditor.css) and associated assets

​

• 组成部分-父母。

- adding '@import "~jsoneditor/dist/jsoneditor.min.css";'
- adding '@import url("~jsoneditor/dist/jsoneditor.min.css";)'
- inlining the [style sheet](https://github.com/josdejong/jsoneditor/blob/master/dist/jsoneditor.css) and associated assets

​

我还设置了演示项目，UI在其中正确呈现，并将其样式与应用程序中相同组件的样式进行比较，并确认缺乏样式是问题的根本原因。下面是UI和失败代码css的图像：

没有样式的UI 没有样式的CSS

获取本地主机上ang-jsoneditor的工作示例的步骤：

1. git克隆https://github.com/mariohmol/ang-jsoneditor.git
2. npm运行启动
3. 导航到"http://localhost:4200“
4. 打开devtools，突出显示json编辑器组件，并在样式窗格中看到jsonedior样式，如： div.jsoneditor-menu>button.jsoneditor-expand-all {背景位置:0 -120 }

我的期望是，如果我在本地应用了父组件. that中的样式，那么它将被应用。由于项目的多模块性质，有一种明显的可能性，即由于未知的约定，在执行之前的所有步骤都是错误的，部分执行是错误的。尽管如此，如果是这样的话，当样式表添加到父-Compenet.scss时，我至少会看到颜色样式。出于这个原因，我认为是我对css先例问题的无知导致了这个问题。

**最新情况**

因此，我在重写儿童角元件造型上阅读了这个链接，它帮助我理解，在默认情况下，子组件是完全封装的，因此，如果不使用穿孔样式或ng深度，父组件中的本地更改不会对子组件产生影响。这向我表明，该模块或ang-json编辑器模块的资产如何注册存在问题。我使用ng深度进行了测试，它确实对组件产生了影响，但是我必须更新整个2000行样式表，所以这是一个不可接受的工作。

Answer 1

缺少css及其后续修复的根本原因是未知的，但是我能够根据Joel Joseph的建议实现一个解决方案，方法是侵入ang-jsoneditors封装，然后在父的scss文件中对组件进行样式化。

以下是以下步骤：

1. 在父组件中： a.导入ViewEncapsulation模块：“从‘@ViewEncapsulation/core’导入{ ViewEncapsulation，…}；” b.将ViewEncapsulation设置为无： @Component({ selector：'parent'，templateUrl：'./parent.component.html'，styleUrls：'./parent.component.scss'，封装: ViewEncapsulation.None })
2. 将css添加到组件中： 添加你的css。对于这种情况，只需从来源复制和粘贴它。
3. 将资产添加到项目中： 在本例中，创建一个名为"img“的文件夹，该文件夹与parent.component.scss的级别相同。 将svg图标资产复制到您的"img“文件夹中。

这解决了我作为临时修复的样式问题。如果/在实现时，我将使用永久解决方案进行更新。