CODEWITHSUNDEEP
htmlcssangularangular-materialquill
Steve Lennon
Steve Lennon

Reputation: 89

CSS classes have no effect on Quill Editor classes Angular

I'm trying to add CSS to my quill editor, but no CSS is applied in any class.

Below is my template

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

AS clearly you can see this includes classes like ql-editor and ql-toolbar (below Image) enter image description here

so i apply CSS to those classes and it won't work. Below is my 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;   
}

Upvotes: 2

Views: 2556

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27353

Since quill-editor component styles are encapsulated you need to move these styles to style.css or you need to use ::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;   
    }

Upvotes: 5

Related Questions