Can't get theme props while creating mdx doc

[chalovega]

Hello Shaun, thank you for your work!

Describe the bug

I'm trying to create an mdx document for my component, but I'm getting the following error. I'm assuming it's a styling problem because apparently theme is undefined when trying to get their elements

TypeError: Cannot read properties of undefined (reading 'fonts')
    at withReset (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-3USI3EON.js?v=4991336f:608:64)
    at handleInterpolation (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-RZN6EXQQ.js?v=4991336f:1353:47)
    at serializeStyles (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-RZN6EXQQ.js?v=4991336f:1419:78)
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-RZN6EXQQ.js?v=4991336f:1635:24
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-RZN6EXQQ.js?v=4991336f:1440:12
    at renderWithHooks (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-NCYERMJI.js?v=4991336f:12171:26)
    at updateForwardRef (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-NCYERMJI.js?v=4991336f:14327:28)
    at beginWork (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-NCYERMJI.js?v=4991336f:15934:22)
    at beginWork$1 (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-NCYERMJI.js?v=4991336f:19749:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-NCYERMJI.js?v=4991336f:19194:20)

This is how I'm creating my theme (I'm using Styled-components, and defining a DefaultTheme type as explained here):

import { DefaultTheme } from 'styled-components'
import { colors } from './colors'
import { borderRadius } from './border-radius'
import { fonts } from './fonts'
import { grid } from './grid'
export const theme: DefaultTheme = { colors, borderRadius, fonts, grid }

This is a sample of the styles used:

export const StyledButton = styled.button<{ $size: SizeType }>`
  ... 
  ${({ $size }) => buttonSizes[$size]}
`

const buttonSizes: Record<NonNullable<SizeType>, ReturnType<typeof css>> = {
  sizeL: css`
    ...
    ${({ theme }) => theme.fonts['font-m-regular']};
  `
  ...
}

And this is how the theme is configured in preview.js

import { withThemeFromJSXProvider } from '@storybook/addon-styling'
import { ThemeProvider } from 'styled-components'
import { theme } from '../src/theme/index'
...
export const decorators = [
  withThemeFromJSXProvider({
    themes: {
      light: theme,
    },
    defaultTheme: 'light',
    Provider: ThemeProvider,
  }),
]

I have no issue displaying the components in storybook, the problem happens only in mdx doc. Is my assumption right or is this an addon-docs problem?

Environment

• React 18
• Storybook 7.1.0
• @storybook/addon-styling 1.3.4
• styled-components 6.0.4

Please reach me if you need more info.

[ShaunEvening]

Hey @chalovega 👋

That's an interesting one! Can you show me the repo or create a reproduction codebase for me to poke around in? It's hard to know what's happening without seeing how your docs are trying to consume the theme

[chalovega]

i'll try to create a repro this weekend, thanks Shaun

[chalovega]

i'm closing this because i ended up fixing it by both setting theme on docs config, like this:

// preview.ts
import { themes } from '@storybook/theming'
...
   docs: {
      theme: themes.light,
    },

... and changing the way I treated themes in my components. I'm now basically using a custom object to get the styles values rather than an actual theme.