内联 Kendo UI 编辑器 div 中的样式元素不起作用答案

【问题标题】：Styling Elements inside inline Kendo UI Editor div not working内联 Kendo UI 编辑器 div 中的样式元素不起作用
【发布时间】：2018-08-08 20:36:33
【问题描述】：

Kendo Editor 呈现在页面上，看起来像这样：

<div _ngcontent-c9 class="k-widget k-editor k-editor-inline" data-role="editor" contenteditable="true">
    <p class="test-class">Hello World</p> 
</div>

我希望能够为一些内联文本设置样式，但我的样式都不想应用，并且在使用开发人员工具检查时它们根本不会出现，因此它们似乎没有被覆盖。

下面是对应的样式：

.k-editor-inline .test-class{
    outline: 1px solid red!important;
}

顺便说一句，我的样式适用于 .k-editor-inline div，里面什么都没有。

【问题讨论】：

标签： css kendo-ui wysiwyg kendo-ui-angular2

【解决方案1】：

问题可能来自this 的帖子，该解决方案的发布位置：

当你为 ng 的子组件设置样式时，你可以尝试添加 /deep/ || >>> || ::ng-deep 属性添加到您的 css 中，如下所示：

.k-editor-inline /deep/ p {
    outline: 1px solid red;
}

如果这对你有帮助，请告诉我，here 是相关文档：)

【讨论】：