Styled-Component Typescript报错：GlobalStylesProps与指定类型无共同属性

解决方案 #

1. 移除手动的GlobalStyleComponent类型标注

修改styles/global.ts，去掉显式的GlobalStyleComponent类型声明，让createGlobalStyle自动推断组件类型：

import {
  createGlobalStyle,
  css,
  DefaultTheme,
} from 'styled-components'

type GlobalStylesProps = {
  removeBg?: boolean
}

// 移除GlobalStyleComponent的手动标注，由TS自动推断类型
const GlobalStyles = createGlobalStyle<GlobalStylesProps>`
  ${({ theme, removeBg }) => css`
    html {
      font-size: 62.5%;
    }

    body {
      font-family: ${theme.font.family};
      font-size: ${theme.font.sizes.medium};

      ${!removeBg &&
      css`
        background-color: ${theme.colors.mainBg};
      `}
    }
  `}
`

export default GlobalStyles

2. 将Storybook预览文件改为TSX格式

把.storybook/preview.js重命名为.storybook/preview.tsx，确保TypeScript能正确识别组件的props类型：

import { ThemeProvider } from 'styled-components'
import GlobalStyles from 'styles/global'
import theme from 'styles/theme'

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <GlobalStyles removeBg />
      <Story />
    </ThemeProvider>
  )
]

原因分析 #

你遇到的TypeScript错误，本质是手动指定GlobalStyleComponent泛型时，干扰了TS的自动类型推断——createGlobalStyle本身会自动处理ThemeProvider注入的theme属性类型，手动标注反而让TS误认为组件只能接受theme相关props，和你传入的removeBg产生类型冲突。

同时，.storybook/preview.js作为JS文件，TS在类型检查时无法完整解析GlobalStyles的自定义props，改为TSX文件后能让TS准确识别组件的全部属性。

补充提示 #

你的theme.ts中未定义font.family和font.sizes.medium属性，当前代码运行时可能会抛出Cannot read properties of undefined错误，建议补充完整theme配置：

export default {
  colors: {
    mainBg: '#06092B'
  },
  font: {
    family: 'sans-serif', // 示例字体
    sizes: {
      medium: '1.6rem' // 示例字号
    }
  }
}

内容的提问来源于stack exchange，提问作者Fernando.tmk