-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
35cfe3d
commit f228dc7
Showing
1 changed file
with
4 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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> |