React使用Styled-Components封装可复用组件报Element type is invalid错如何排查

问题排查方向 #

• 导入导出语法不匹配是最常见诱因
  你当前代码中Spinner为命名导出，导入时必须使用对应语法：

  import { Spinner } from './你的组件文件路径'
  

  若误用默认导入写法import Spinner from './你的组件文件路径'，会导致引入的Spinner值为undefined，直接触发当前报错。
• 检查styled-components依赖配置
  确认已正确安装styled-components依赖，导入语句拼写无误，不要遗漏末尾的s：

  // 正确写法
  import styled from 'styled-components'
  

• 检查组件调用规范
  React要求自定义组件首字母必须大写，若使用时写为<spinner />而非<Spinner />，也会触发同类报错。

你提供的组件本身无语法问题，以上三点排查完成即可正常运行。如果需要兼容未配置styled-components主题的场景，可以将样式中的主题取值增加兜底逻辑：

stroke: ${(props) => props?.theme?.colors?.black ?? '#000'};

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