Replies: 1 comment 1 reply
-
|
Try adding the Emotion cache configuration like this import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
const customCache = createCache({
key: 'custom',
prepend: false, // With prepend set to false, the style tag is inserted at the end of the <head>, giving it higher priority.
});
export const decorators = [
(Story) => (
<CacheProvider value={customCache}>
<Story />
</CacheProvider>
),
];Setting prepend to false inserts the style tag at the bottom of the , which increases its priority and makes it easier to override styles. |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
thanks i'll try! |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
https://emotion.sh/docs/css-prop#style-precedence
when you see above article
CSS delivered from the parent component is applied later.
i am using storybook8, vite, emotion
in local server, it works fine.
but in result of build doesn't work like the article said.
in xxx.stories.tsx
As you can see above, I pass css props to SelectButton.
and SelectButton.Root has default css, height and padding already defined.
as you can see, 1 className and the default height and padding have been overridden and ignored.
that is what i want.
but in build result, below picture
The css I put in the stories file was ignored.
of course, i can increase CSS priority with && selector or fix it with !important.
but i don't wanna use these methods
I would like to modify the build configuration so that the class name is one, or the value entered as CSS props in the parent component is applied first. Except for Storybook, other services work as described.
I tried many ways but couldn't find it.
If anyone knows, please let me know.
ah! Previously, I used Storybook 6 and webpack4, and there were no problems back then.
thank you for reading
Beta Was this translation helpful? Give feedback.
All reactions