Stories not applying the ::ng-deep classes from component .scss files

Bug or support request summary

When writing stories of an Angular component and having ::ng-deep classes in the .scss file with some !important, those styles are not loaded into storybook.

Steps to reproduce

To reproduce:

1. Create an angular component that uses another component as a template.
2. Override the original classes with ::ng-deep in the .scss file.
3. Write a story using that component.
4. Observe the ::ng-deep classes are not loaded.

Please specify which version of Storybook and optionally any affected addons that you’re running

• @storybook/angular: 5.2.8

Screenshots

This is how it is supposed to look like and chrome dev tools

Vs how it is loading on storybook

Code Snippets

The typescript file

@Component({
    selector: 'zip-select',
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => SelectComponent),
          multi: true
        }
    ],
    template: /* html */ `
    <mat-form-field appearance="outline">
        <mat-label>{{ label }}</mat-label>
        <mat-select [placeholder]=placeholder [zipDisableControl]=disabled disableOptionCentering [formControl]=formControl
            (selectionChange)="select($event)">
            <mat-option *ngFor="let item of items" [value]="item">
                {{ item }}
            </mat-option>
        </mat-select>
        <mat-error *ngIf="formControl.invalid" innerHTML="{{error}}" (click)="linkClick()">{{error}}</mat-error>
    </mat-form-field>
    `,
    styleUrls: ['./select.component.scss']
})

The scss file

::ng-deep .mat-select-panel {
    margin-top: 35px;
    padding-top: 8px !important;
    width: 100% !important;
}

::ng-deep .mat-option.mat-active {
    background-color: rgba(28, 112, 242, 0.1) !important;
}

::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    transform: rotate(225deg) !important;
    margin-top: 7px !important;
}

::ng-deep .mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {
    color: #b00020 !important;
}
  
::ng-deep .mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
    color: #e8e8ec !important;
}

Any help is appreciated! Thank you

[johnnysainz]

I’ve got the same issue. Trying to override mat-input styles with ::ng-deep. Works in the app, but not in storybook. Also tried no encapsulation without ::ng-deep. No change.

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!