样式化组件 v5.3 createGlobalStyles 不工作答案

【问题标题】：Styled Component v5.3 createGlobalStyles not Working样式化组件 v5.3 createGlobalStyles 不工作
【发布时间】：2021-06-27 18:31:58
【问题描述】：

我正在尝试使用 createGlobalStyles 为我的应用程序创建全局样式，但不知何故，组件没有呈现并且我收到控制台警告。

App.js

import GlobalStyles from "./styles/GlobalStyles";

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

export default App;

GlobalStyles.js

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
html {
  font-size: 8px;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
  font-weight: 200;
}
body {
  font-size: 8px;
  
}
h1 {
    font-size: 2rem;
}

`;

export default GlobalStyles;

控制台错误[在此处输入图片描述][1]

GlobalStyle.js:28 The global style component sc-global-dtGiqY was given child JSX. createGlobalStyle does not render children.

错误截图

https://i.stack.imgur.com/QJBLz.png

【问题讨论】：

报错信息是不是不够？据说GlobalStyle 不会渲染孩子。见styled-components.com/docs/api#createglobalstyle。

标签： javascript css reactjs styled-components

【解决方案1】：

将 <GlobalStyles /> 作为其他内容的同级元素，而不是尝试接受子元素的父元素。

<div className="App">
  <GlobalStyles />
  <h1>This is a test line</h1>   
</div>

【讨论】：