Storybook: Theme from ThemeProvider is not passed down to component from module

[ShaiDemri]

Describe the bug
The components are styled using styled-component.

I am using @storybook/addon-contexts/ to control the theme of the components and generally it works well. However when I write a story of a component the lives in other project (related by symlink) the theme is undefined.

To Reproduce
Steps to reproduce the behavior:
Create a storybook project
link it to a react project (yarn link...)
write story of a component from the linked project that is styled with style-component
(i.e background-color: ${p => p.theme.palette.white}; is applied on the component).

Expected behavior
The theme should be present in the component rendered from the story.

Screenshots

Code snippets

_webpack.config.js_

module.exports = {
    module:{
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /node_module/,
                use:{
                    loader: "babel-loader",
                    options:{
                        presets:['@babel/preset-env','@babel/react'],
                        plugins: ["babel-plugin-styled-components"]
                    }
                }
            }
        ]
    }
}

_.storybook/main.js_

const path = require('path')
const fs = require('fs')
const DefinePlugin = require('webpack').DefinePlugin;

module.exports = {
    stories: ['../stories/**/*.stories.js'],
    addons: [
        '@storybook/addon-viewport/register',
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-knobs/register',
        '@storybook/addon-contexts/register',
        'storybook-readme/register',
    ],
    webpackFinal: async config => {
        config.plugins = config.plugins || [];
        config.plugins.push(
            new DefinePlugin({
                SC_DISABLE_SPEEDY: true
            })
        );
        config.module.rules.push(
            {
              test: /\.(js|jsx)$/,
              include: [
                __dirname,
                fs.realpathSync(
                  path.resolve(
                    path.join(
                      __dirname,
                      '..',
                      'node_modules',
                      '@company/react-app',
                      'src'
                    )
                  )
                ),
              ],
              loader: 'babel-loader',
              options: {
                presets: ["@babel/preset-env","@babel/react"],
                plugins: ["babel-plugin-styled-components"],
                babelrc: false,
              },
            },
        );
        return config;
    }
}

_.storybook/preview.js_

import { addDecorator } from '@storybook/react';
import { withContexts } from '@storybook/addon-contexts/react';
import { contexts } from './config/contexts'; 

addDecorator(withContexts(contexts));

_.storybook/config.contexts.js_

import theme from '@company/react-app';
import darkTheme from '@company/react-app';
import {ThemeProvider} from 'styled-components';

export const contexts = [
    {
      icon: 'box',
      title: 'Themes',
      components: [
        ThemeProvider
      ],
      params: [
        { name: 'Light Theme', props: { theme } ,default: true },
        { name: 'Dark Theme', props: { theme: darkTheme} },
      ],
      options: {
        deep: true, 
        disable: false, 
        cancelable: false,
      },
    },
  ];

System:

Environment Info: System: OS: macOS 10.15.3 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Binaries: Node: 12.15.0 - /usr/local/bin/node Yarn: 1.22.0 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 80.0.3987.87 Safari: 13.0.5 npmPackages: @storybook/addon-actions: ^5.3.13 => 5.3.13 @storybook/addon-backgrounds: ^5.3.13 => 5.3.13 @storybook/addon-contexts: ^5.3.13 => 5.3.13 @storybook/addon-knobs: ^5.3.13 => 5.3.13 @storybook/addon-links: ^5.3.13 => 5.3.13 @storybook/addon-options: ^5.3.13 => 5.3.13 @storybook/addon-viewport: ^5.3.13 => 5.3.13 @storybook/addons: ^5.3.13 => 5.3.13 @storybook/react: ^5.3.13 => 5.3.13

[danielbayerlein]

I use the following workaround:

File: preview.js

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

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

[shilman]

@danielbayerlein starting in 6.0 this will be the recommended way to do things: https://github.com/storybookjs/storybook/pull/10028

[ShaiDemri]

I use the following workaround:

_File:_ preview.js

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

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

This method doesn't work for stories of components that are related through "yarn link...."

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!