Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Applying custom styles to Storybook components doesn't work #9532

Closed
ArrayKnight opened this issue Jan 18, 2020 · 5 comments
Closed

Applying custom styles to Storybook components doesn't work #9532

ArrayKnight opened this issue Jan 18, 2020 · 5 comments
Assignees

Comments

@ArrayKnight
Copy link

ArrayKnight commented Jan 18, 2020

Describe the bug
When trying to apply styles (new or override) to Storybook components (not all have been tested, but should be), the styles do not get applied.

To Reproduce
See code sample below.

Expected behavior
Styles are applied.

Screenshots
image

Code snippets

import { Form } from '@storybook/components'
import { css, styled } from '@storybook/theming'

const { Field } = Form

export const AField = styled(Field)`
    padding: 0;
    margin: 0;
    color: red;
`

export const BField = styled(Field)(({ theme }) => ({
    padding: 0,
    margin: 0,
    color: 'red',
}))

export const CField = styled(Field)(
    ({ theme }) => css`
        padding: 0;
        margin: 0;
        color: red;
    `,
)

System:
Environment Info:

System:
OS: Windows 10 10.0.18362
CPU: (8) x64 Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz
Binaries:
Node: 10.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0

I'm using Chrome Version 79.0.3945.130 (Official Build) (64-bit), but browser doesn't matter.

"@storybook/addons": "^5.3.6",
"@storybook/api": "^5.3.6",
"@storybook/components": "^5.3.6",
"@storybook/core-events": "^5.3.6",
"@storybook/theming": "^5.3.6",

Additional context
This is true if using styled from @storybook/theming or from @emotion/styled and no matter which syntax is used.

@shilman
Copy link
Member

shilman commented Jan 19, 2020

@ndelangen any ideas?

@ndelangen ndelangen self-assigned this Jan 23, 2020
@ndelangen
Copy link
Member

Adding this to my todo list

@ndelangen
Copy link
Member

Yes, I know what's going on, opening a PR

@shilman
Copy link
Member

shilman commented Jan 30, 2020

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 containing PR #9665 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Jan 30, 2020
@shilman
Copy link
Member

shilman commented Feb 2, 2020

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.10 containing PR #9665 that references this issue. Upgrade today to try it out!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants