Skip to content

Commit

Permalink
Update setup.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
winkerVSbecks authored Aug 22, 2024
1 parent 35cfe3d commit f228dc7
Showing 1 changed file with 4 additions and 5 deletions.
9 changes: 4 additions & 5 deletions src/content/storybook/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -364,18 +364,17 @@ Use the same method to debug the following errors:
</details>

<details>
<summary>Why are styles not applied?</summary>
<summary>Why are styles not applied correctly in stories?</summary>

If styles are not rendering correctly, there could be several reasons behind that:

1. **The order in which stylesheets are loaded.** In development mode, styles from the preview might be imported earlier than component styles, while in production mode, this order could be reversed. This affects the specificity and, ultimately, the rendering of styles. If this is the case, the styles render but are overwritten by others.
1. **The order in which stylesheets are loaded.**

Note that stylesheets were **initially** loaded in Storybook 6 and older, while from Storybook 7 onwards, they only get loaded **when the story is viewed**. This affects how styles load.
- In development mode, styles from the preview might be imported earlier than component styles, while in production mode, this order could be reversed. This affects the specificity and, ultimately, the rendering of styles. If this is the case, the styles render but are overwritten by others.
- In Storybook 6 and earlier, stylesheets were loaded upfront, while from Storybook 7 onwards, stylesheets are loaded on-demand when the story is viewed. This affects how styles load.

2. **Browser compatibility.** If the browser version does not support certain CSS features, styles may not apply correctly. Find browser versions supported by our Capture Infrastructure [here](/docs/infrastructure-release-notes).

3. **Shadow DOM.** If you use web components with styles encapsulated in a shadow DOM, Chromatic's capture helpers may not capture them.

If you have additional questions, use our **in-app chat** to contact or email us at [[email protected]](mailto:[email protected]).

</details>

0 comments on commit f228dc7

Please sign in to comment.