React中styled-components的background-image使用props及类型报错处理

你遇到的是TypeScript类型校验错误。Wrap是基于原生div生成的styled组件，默认只支持原生div的HTML属性，你自定义传入的bgImage属性没有提前声明类型，因此TypeScript无法识别该属性的合法性，抛出该错误。

1. TypeScript项目处理方案 #

显式给Wrap组件声明接收的自定义props类型即可：

// 先定义Wrap组件接收的属性类型
type WrapProps = {
  bgImage: string;
}

// 给styled组件绑定该类型
const Wrap = styled.div<WrapProps>`
height: 100vh;
width: 100%;
background-image: ${(props) => `url("../images/${props.bgImage}")`};
background-size: cover;
background-position: center;
background-repeat: no-repeat;
`

2. JavaScript项目处理方案 #

如果是JS项目出现该报错，一般是IDE默认开启了针对JS文件的TypeScript类型校验，两种处理方式：

• 在Wrap定义的上一行添加注释跳过当前行的类型校验：

// @ts-ignore
const Wrap = styled.div`
// 原有样式代码不变
`

• 调整IDE设置，关闭针对JavaScript文件的TypeScript类型校验功能。

你当前使用的是相对路径拼接图片地址，项目打包部署后大概率会出现图片资源无法加载的问题，建议调整为以下两种方式处理图片资源：

• 把所有背景图片放到项目public目录下，路径直接写url(/images/${props.bgImage})
• 提前import引入对应图片资源，把引入后的资源变量直接传给bgImage属性，样式里直接写url(${props.bgImage})即可

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