CSS 类对 Quill 编辑器类 Angular 没有影响

Question

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

下面是我的模板

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

很明显，您可以看到这包括像 ql-editor 和 ql-toolbar 这样的类（下图）

所以我将 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;   
    }