React中向makeStyles传递props设置背景图报错该如何解决？

问题原因 #

• 你错误地将自定义属性backgroundImageLink直接挂载到了原生<div> DOM元素上：React会校验原生DOM元素的属性是否为标准HTML属性，非标准的自定义属性直接传递时就会抛出你看到的警告。
• 你调用useStyles时传入的是整个组件的props，但组件props中并没有backgroundImageLink字段，该属性你写在了div标签上，根本没有传入makeStyles的样式逻辑中，所以背景图样式自然不会生效。

修复方案 #

你不需要给div传递非标准自定义属性，只需要把需要的背景图链接整理后传入useStyles即可，修改后的组件代码如下：

const MyComponent = (props) => {
  const classes = useStyles({
    backgroundImageLink: props.product?.image
  });

  return (
    <div
      className={classes.divBackground}
      sx={{ position: "relative" }}
    ></div>
  );
};

export default MyComponent;

你原有makeStyles的样式逻辑不需要做修改，就可以正常读取传入的图片链接生成对应背景样式。

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