https://github.com/codex-/storybook-mui-classname-generator-issue
https://github.com/codex-/storybook-mui-classname-generator-issue
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codex-/storybook-mui-classname-generator-issue
- Owner: Codex-
- Created: 2023-10-03T20:41:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-03T22:33:15.000Z (almost 3 years ago)
- Last Synced: 2023-10-04T12:11:25.153Z (almost 3 years ago)
- Language: TypeScript
- Size: 128 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Storybook MUI custom classname generation issue
- 📄 Discussion:
This repository exists to demonstrate an issue when using [MUIs ClassName generator customisation](https://mui.com/material-ui/experimental-api/classname-generator/) with storybook.
## Issue
When viewing storybook stories via statically generated builds, the import order within `preview.tsx` is not respected, which in the case of MUI classname customisation causes styling and clasname operations to happen out of order resulting in mixed styles.
The storybook static builds work correctly if the import that customises the Mui ClassName generation is disabled:
`preview.tsx`
```tsx
import "./MuiClassNameSetup"; // Comment this line out to 'fix' storybook static builds
```
### Expected
Here we can see the expected styles being applied correctly, which can be seen when running storybook via `npm run storybook`
### Actual
This is the rendered content looks like when serving the statically generated builds which can be seen via `npm run storybook:static`
