[Fixed] How to style Class inside of ng-content?

Issue

I have this fileupload component with <ng-content>. All tags inside the component inherit background-color: rgba(121, 211, 255, 0.15); from the .fileover class when a user hovers over with a file from OS to the fileupload area. But I can’t get the background color to change for the .ag-center-cols-viewport inside of <ng-content>. I have tried to use ::slotted and ::ng-deep. Last pictures show that background-color: red; works if I change the color inside chrome devtols.

::ng-deep doc

::slotted doc

Any suggestions why this doesn’t work?

HTML:

 <div>
            <div class="containerDragDrop" appDnd (fileDropped)="onFileDropped($event)">
              <input class="inputDragDrop file-input" type="file" #fileupload accept="{{accept}}"
                     [disabled]="disabled" multiple
                     (change)="addFiles($event)"/>
                     <ng-content class="fileDropRef"></ng-content>
              <div class="middleFileText">
      </div>
      <label *ngIf="choseFileToggle" class="labelDragDrop" (click)="fileupload.click()">Välj Filer</label>
            </div>
          </div>

CSS with ::slotted:

.fileover {
  .middleFileText{
    opacity: 0.8;
  }
  background-color: rgba(121, 211, 255, 0.15);
  :host ::slotted(.ag-center-cols-viewport) {
    background-color: rgba(121, 211, 255, 0.15) !important;
  }
}

CSS with ::ng-deep:

.fileover {
  .middleFileText{
    opacity: 0.8;
  }
  background-color: rgba(121, 211, 255, 0.15);
  :host ::ng-deep .ag-center-cols-viewport {
    background-color: rgba(121, 211, 255, 0.15) !important;
  }
}

Solution

I’m missing some information on where your html code is located and what ag-center-cols-viewport is, but I think you did add this into a component. let says my.component.html and ag-center col was imported into your @NgModule

Notice: ::ng-deep is deprecated and will be removed in the future version of angular, please never use it again

within the my.component.ts add the following

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  encapsulation: ViewEncapsulation.None, // <-- Here, we remove the style encapsulation
})

and withing your my.component.scss then write it like this

 my-component { // Name of your selector
  .fileover {
  .middleFileText{
    opacity: 0.8;
  }
  background-color: rgba(121, 211, 255, 0.15);
  .ag-center-cols-viewport {
    background-color: rgba(121, 211, 255, 0.15) !important;
  }
}
}

If this doesn’t works, it may be because you’re using a component that does load the code on a higher level, meaning the code isn’t within your component, but outside, added somewhere in the DOM.

To be able to change this with css then you would have to add global css into the style.css situated at the root of the src folder

.ag-center-cols-viewport {
    background-color: rgba(121, 211, 255, 0.15) !important;
}

And if you don’t want the css to change globally, then you should find a way to add some custome css class name to the ag-center-cols-viewport