Styling Elements inside inline Kendo UI Editor div not working

Question

Kendo Editor renders in on the page looking somethign like this:

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

I want to be able to style some of the inline text, but none of my styles want to apply, and upon inspecting with developer tools they don't appear at all, so it doesn't appear they are being overridden.

Here is the corresponding styles:

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

Btw, my styles work on the .k-editor-inline div, just nothing inside it.

Answer 1

The problem may come from this post, where this solution was posted:

When you style a child component of ng, then you may try adding the /deep/ || >>> || ::ng-deep property to your css like this:

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

Let me know if that helps you, here is the documentation for that :)