Styled Component v5.3 createGlobalStyles不生效 组件不渲染且控制台报警告

问题原因 #

createGlobalStyle 生成的全局样式组件不支持嵌套子元素，该组件仅用于向应用注入全局样式，本身不会渲染任何子节点。你代码中将页面内容放在<GlobalStyles>标签内部的写法不符合用法要求，因此触发控制台警告、子元素无法渲染。

修正方案 #

仅需要修改App.js中的组件嵌套逻辑，全局样式组件写成自闭合标签放在根容器顶部即可，业务内容放在和它同级的位置：

import GlobalStyles from "./styles/GlobalStyles";

function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <h1>This is a test line</h1>
    </div>
  );
}

export default App;

GlobalStyles.js代码无需改动，修改后全局样式会正常生效，页面内容也可以正常渲染，控制台警告会自动消失。

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