TypeScript+Styled Components(tsx) 读取primaryColor为undefined报错求助

这个报错是运行时访问primaryColor的上层对象为undefined导致，和你已完成的TS类型定义无关，类型检查仅作用于编译阶段，不影响运行时逻辑，可按以下优先级排查：

• 检查测试用例是否正确注入ThemeProvider
  你提到仅在库测试场景下报错、组件正常渲染，优先确认测试代码中是否给被测组件包裹了styled-components的ThemeProvider并传入正确的theme配置，开发环境入口的ThemeProvider不会自动注入到测试环境。测试用例示例：

  import { render } from '@testing-library/react'
  import { ThemeProvider } from 'styled-components'
  import { theme } from './theme.ts'
  import PrimaryButton from './PrimaryButton'
  
  test('按钮渲染正常', () => {
    render(
      <ThemeProvider theme={theme}>
        <PrimaryButton>测试</PrimaryButton>
      </ThemeProvider>
    )
  })
  

• 检查样式定义是否正确读取theme属性
  确认styled组件内读取theme的语法是否正确，错误的直接引用会导致访问到undefined变量：

  // 错误写法
  const PrimaryButton = styled.button`
    background-color: ${theme.primaryColor};
  `
  // 正确写法
  const PrimaryButton = styled.button`
    background-color: ${props => props.theme.primaryColor};
  `
  

• 检查入口文件index.tsx的ThemeProvider配置
  若开发环境也偶现该报错，确认根组件是否被ThemeProvider包裹，且theme属性已传入你导出的主题配置对象，不存在拼写错误。
• 检查是否存在循环依赖
  如果你是直接导入theme.ts的导出对象使用，而非通过props.theme读取，排查theme.ts和引用它的文件是否存在循环依赖，导致模块初始化时theme对象未完成赋值就被导出，表现为运行时的undefined。

可通过可选链+默认值兜底避免报错，不影响正常功能：

const PrimaryButton = styled.button`
  background-color: ${props => props.theme?.primaryColor ?? '#1677ff'};
`

内容的提问来源于stack exchange，提问作者MShar