Applying Global Stylesheets per Story in a Shared Angular Storybook

[lundmikkel]

Summary

We are using a shared Storybook setup for multiple Angular applications, and each app has its own global stylesheet written in SASS (.scss). Our goal is to mix stories from different apps in the same Storybook, but without the global styles from one app clashing with another.

I would like to apply the correct global stylesheet for a given story. Ideally, I want to determine which global stylesheet should be included on a per-story basis.

I've tried wrapping the component in a parent component and adding the global stylesheet via styleUrls. However, this approach scopes the styling to the parent component, which means the inner component (the one I’m trying to make a story for) isn’t affected by the global styles.

Has anyone encountered a similar issue, or is there a better approach for loading global styles dynamically for specific stories in Storybook?

Additional information

No response

Create a reproduction

No response

[Marklb]

There is probably a better way to do this, but I think your idea of a wrapper component was a straightforward solution that sticks to what Angular already provides. It is a bit of boilerplate for just styles, though. If you just change the component's encapsulation, the styles wont get scoped.

I have been busy this week, but when I get time I will see if I can find any example projects I have made for people solving similar problems.

Here is a quickly thrown together snippet of what I mean:

@Component({
  selector: 'story-styles-1',
  standalone: true,
  template: `<ng-content></ng-content>`,
  styles: [`
    body {
      background-color: rgba(30,30,30,1);
    }
  `],
  encapsulation: ViewEncapsulation.None, // Important part
})
class StoryStyles1Component { }

@Component({
  selector: 'story-styles-2',
  standalone: true,
  template: `<ng-content></ng-content>`,
  styles: [`
    body {
      background-color: rgba(80,60,230,1);
    }
  `],
  encapsulation: ViewEncapsulation.None, // Important part
})
class StoryStyles2Component { }

export default {
  component: ExampleComponent,
} as Meta

export const Story1 = {
  decorators: [
    componentWrapperDecorator(StoryStyles1Component),
  ],
}

export const Story1 = {
  decorators: [
    componentWrapperDecorator(StoryStyles2Component),
  ],
}