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

[Siskat]

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

[kroeder]

Hm I never had any issue using ::ng-deep in storybook
Could you provide a minimal reproduction repo, please?

Side note, in case you don't know: ::ng-deep applies a css rule globally and you can overwrite everything (e.g. ::ng-deep body is valid) while :host ::ng-deep means you overwrite everything in your specific component template.

Is it possible you use ::ng-deep in other places / other *.component.scss with similar rules and these rules overwrite the styles in the wrong order?

[Siskat]

Hm I never had any issue using ::ng-deep in storybook
Could you provide a minimal reproduction repo, please?

Side note, in case you don't know: ::ng-deep applies a css rule globally and you can overwrite everything (e.g. ::ng-deep body is valid) while :host ::ng-deep means you overwrite everything in your specific component template.

Is it possible you use ::ng-deep in other places / other *.component.scss with similar rules and these rules overwrite the styles in the wrong order?

Here is the minimal repo.

I am positive that they are not being overriden. If you take a look at the repo, and run the demo-page instead of storybook, the styles are applied correctly. Storybook is just not loading them.

I am also using a global stylesheet theme.scss but that is loading correctly. Just not the ng-deep in the component level .scss files.

[kroeder]

Do you also have an error message when starting storybook? It seems to be related to the mentioned issue above

I'll look into that

[Siskat]

Do you also have an error message when starting storybook? It seems to be related to the mentioned issue above

I'll look into that

Ah yes, I am getting the same warnings as the issue that you referred this from.

[kroeder]

I fixed the angular cli error in #9390 but it does not fix the issue with ::ng-deep

Removing ::ng-deep applies those styles but it doesn't make sense to me 🤔
I need to do some more research

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[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]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

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!

[lacroixdavid1]

Does anyone have a solution for this?