所以我正在为这家公司构建一个设计系统，组件系统在设计系统故事书中正确显示。

TypeError: Cannot read property 'width' of undefined in theme.border.width

设计系统项目：

/// src/components/Button/index.js
import { Wrapper } from './styles'
import React from 'react'

export const Button = (props) => (
  <Wrapper {...props}>
    {children}
  </Wrapper>
)

.

///src/components/Button/styles.js    
export const Wrapper = styled.button`
...
border-width: ${({theme}) => theme.border.width};
...
`

.

/// .storybook/preview.js
import React from 'react'
import { ThemeProvider } from 'styled-components'
import { GlobalStyle } from '../src/styles/globalStyles'
import { theme } from '../src/styles/theme'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
}
export const decorators = [
  Story => (
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <Story />
      </ThemeProvider>
    )
 ]

.

/// src/index.js
...
export { Button } from 'components/Button'
export { theme } from 'style/theme'

...

.

/// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/env',
      {
        modules: false
      }
    ],
    ['@babel/preset-react']
  ],
  plugins: [
    [
      'styled-components',
      {
        ssr: true,
        displayName: true,
        preprocess: false,
        minify: false
      }
    ]
  ]
}

.

///rollup.config.js
import babel from 'rollup-plugin-babel'
import includePaths from 'rollup-plugin-includepaths'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'

export default [
  {
    input: 'src/index.js',
    output: [
      {
        name: 'rollup-tutorial',
        file: 'dist/index.js',
        format: 'es'
      }
    ],
    plugins: [
      babel({
        exclude: 'node_modules/**'
      }),
      includePaths({
        paths: ['src'],
        extensions: ['.js', '.json', '.html']
      }),
      peerDepsExternal()
    ]
  }
]

.

/// package.json
{
  "name": "design-system",
  "main": "dist/index.js"
  "files: ["dist"],
  "scripts": {
    ...
    "build": "rollup --config"
    ...
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-env": "^7.12.13",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "rollup": "^2.38.4",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-includepaths": "^0.2.4",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "styled-components": "^5.2.1",
  },
 "peerDependencies": {
    "prop-types": ">= 15.x.x",
    "react": ">= 17.x.x",
    "styled-components": ">= 5.x.x",
  }
}

App消费端NextJs默认配置

/// .babelrc

{
  "presets": ["next/babel"],
  "env": {
    "development": {
      "plugins": [
        [
          "styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ]
      ]
    },
    "production": {
      "presets": [
        "next/babel"
      ],
      "plugins": [
        [
          "styled-components",
          {
            "ssr": true,
            "displayName": false
          }
        ]
      ]
    }
  }
}

.

///package.json
{
  ...
  "dependencies":  {
    ...
    "design-system": "../design-system/",
    ...
  }
  ...
}

.

/// pages/_app.js
import { ThemeProvider } from 'styled-components'
import { theme } from 'design-system'

function MyApp({ Component, pageProps }) {
  console.log(theme)
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

.

///pages/index.js
import { Button } 'design-system'

export default function Home() {
  return (
   <Button />
  )
}

注意：

console.log(theme)打印预期的主题，但是按钮无法访问样式化组件提供的主题。我想我错过了一些重要的babel rollup配置或其他东西

注2：

我已经尝试过用withComponentHOC Package 组件，唯一可行的解决方案是下一段代码

///pages/index.js
import { Button } 'design-system'
import { useTheme } 'styled-components'

export default function Home() {
  const theme = useTheme()
  return (
   <Button theme={theme} />
  )
}

但这就失去了使用上下文的全部意义
先谢谢你了