TS2322报错：使用styled-components时div类型不存在css属性如何解决

解决方案 #

第一步：确认styled-components版本匹配类型依赖 #

• 若你使用的是 styled-components v6及以上版本：v6已内置官方TS类型，不需要额外安装@types/styled-components，直接卸载该依赖，同时删除tsconfig.json中compilerOptions.types数组里的"@types/styled-components"项即可解决类型冲突。
• 若你使用的是 styled-components v5及更低版本：继续看后续步骤。

第二步：补充CSS Prop类型声明 #

配置修改完成后如果还是报错，建议重启IDE的TS语言服务。

方案A（推荐）：修改tsconfig配置

在tsconfig.json的compilerOptions.types数组中新增styled-components/cssprop项，修改后配置如下：

"types": ["@types/styled-components", "styled-components/cssprop"]

保存后重启TS服务即可识别原生元素的css属性。

方案B（兜底，兼容性更高）：手动添加全局类型声明

在项目src目录下新建styled.d.ts类型声明文件，写入以下内容：

import type { CSSProp } from 'styled-components';

declare module 'react' {
  interface Attributes {
    css?: CSSProp;
  }
}

TS会自动加载该声明文件，完成后即可识别css属性。

第三步（若使用Babel编译）：检查插件配置 #

如果你的项目不是用tsc直接编译，而是通过Babel转译TSX代码，需要确保安装了babel-plugin-styled-components，并在Babel配置（.babelrc / babel.config.json）的plugins数组中添加以下配置：

["babel-plugin-styled-components", { "cssProp": true }]

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