CSS classes have no effect on Quill Editor classes Angular

Question

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)

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;   
}

Answer 1

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;   
    }