CSS 类 对 Quill Editor 没有影响 类 Angular

Question

我正在尝试将 CSS 添加到我的羽毛笔编辑器中，但没有 CSS 应用于任何 class。

下面是我的模板

<div class="container">
      <form [formGroup]="editForm">
        <quill-editor  [modules] = "config" 
        (onEditorChanged) = "onContentChange($event)" formControlName="editor"></quill-editor>  
      </form>             
</div>

很明显，您可以看到这包括 classes，例如 ql-editor 和 ql-toolbar（下图）

所以我对那些 class 应用了 CSS 但它不起作用。 下面是我的CSS

.container .ql-editor{
    width : 8.5in;
    min-height:   11in;
    padding: 1in;
    margin: 1 rem;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    background-color: white;
}

.container .ql-container.ql-snow{
border:none;
display:flex;
justify-content: center;   
}

Answer 1

由于封装了quill-editor组件样式需要将这些样式移动到style.css或者需要使用::ng-deep

  ::ng-deep .container .ql-editor{
        width : 8.5in;
        min-height:   11in;
        padding: 1in;
        margin: 1 rem;
        box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
        background-color: white;
    }
    
    ::ng-deep .container .ql-container.ql-snow{
     border:none;
     display:flex;
     justify-content: center;   
    }