CSS 类对 Quill Editor 类 Angular 没有影响答案

【问题标题】：CSS classes have no effect on Quill Editor classes AngularCSS 类对 Quill Editor 类 Angular 没有影响
【发布时间】：2021-05-15 21:40:24
【问题描述】：

我正在尝试将 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;   
}

【问题讨论】：

这也取决于其他样式。如果您可以在 Codesandbox 或任何其他平台上重现此演示，人们可以调试问题。

标签： html css angular angular-material quill

【解决方案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;   
    }

【讨论】：