Can't access styled-components theme in stories

Describe the bug I’m using styled-components in combination with @storybook/react. I’m wrapping all my stories in the SC ThemeProvider like this:

addDecorator((storyFn) => (
    <ThemeProvider theme={themeBasic}>
        {storyFn()}
    </ThemeProvider>
));

This works fine and all of my Styled Components have access to the theme. However, I also want to access the theme in my stories:

import { ThemeContext } from 'styled-components';

export const Configurable = () => {
    const theme = useContext(ThemeContext);
    console.log(theme); // undefined

    return (
        // Some React stuff here
    );
};

Shouldn’t this be working?

System:

Environment Info:

  System:
    OS: macOS 10.15
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.3
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-actions: ^5.2.5 => 5.2.5
    @storybook/addon-backgrounds: ^5.2.5 => 5.2.5
    @storybook/addon-info: ^5.2.5 => 5.2.5
    @storybook/addon-knobs: ^5.2.5 => 5.2.5
    @storybook/react: ^5.2.5 => 5.2.5

[pocka]

I guess this issue is the same as https://github.com/storybookjs/storybook/issues/8426. If so, this could solve your problem. (NOTE: I didn’t test the code. Just saw the workaround.)

// Using StoryFn as component instead of invoking it
addDecorator(StoryFn => (
    <ThemeProvider theme={themeBasic}>
        <StoryFn/>
    </ThemeProvider>
));

[glocore]

According to the latest docs (v5.3), you need to add a global decorator in .storybook/preview.js:

import React from "react";
import { addDecorator } from '@storybook/react';
import { ThemeProvider } from "styled-components";
import theme from "../src/theme";

addDecorator(storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>)

https://storybook.js.org/docs/addons/introduction/#storybook-decorators