使用styled-components动态创建组件报错的解决办法咨询

问题现象 #

为React应用添加styled-components的Page、Navigation等样式组件后，用户在输入框输入内容时，控制台持续弹出警告：

checkDynamicCreation.js:32 The component styled.div with the id of "sc-fEOsli" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

未添加样式前应用运行正常，添加后出现上述警告。

原因分析 #

styled-components的核心要求是：所有样式组件必须在函数组件/渲染方法的外部定义。如果在组件内部（比如组件的return分支、事件处理函数、useEffect钩子中）动态创建样式组件，每次组件重渲染（比如输入框内容变化触发state更新）时，都会重新生成新的样式组件实例，既浪费性能，也会触发该警告。

从你提供的App代码来看，Page、Navigation等样式组件的定义是符合规范的（在App组件外部），但警告的根源大概率出在子组件（比如BlogForm、LoginForm、SingleBlog等）中——这些组件内部可能存在在函数作用域内定义styled组件的情况。

解决方案 #

核心规则 #

永远不要在函数组件的内部（包括return语句、useEffect、事件处理函数等）定义styled组件，必须将所有样式组件的定义放在模块顶层作用域或组件函数的外部。

具体修改步骤 #

1. 检查所有子组件（BlogForm、LoginForm、SingleBlog等），找出在组件内部定义的styled组件。
2. 将这些styled组件的定义迁移到组件函数的外部。

错误与正确写法示例 #

错误写法（组件内部定义styled组件）

import styled from 'styled-components'

const LoginForm = () => {
  // 错误：在组件内部动态创建样式组件
  const StyledInput = styled.input`
    padding: 8px;
    border: 1px solid #ddd;
  `

  return (
    <form>
      <StyledInput type="text" placeholder="Username" />
    </form>
  )
}

正确写法（组件外部定义styled组件）

import styled from 'styled-components'

// 正确：在组件外部定义样式组件，属于模块顶层作用域
const StyledInput = styled.input`
  padding: 8px;
  border: 1px solid #ddd;
`

const LoginForm = () => {
  return (
    <form>
      <StyledInput type="text" placeholder="Username" />
    </form>
  )
}

完成上述修改后，输入框输入内容时的警告会消失，同时组件渲染性能也会有所提升。

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