我正在尝试使用 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.
错误截图
最佳答案
地点 <GlobalStyles />
作为其他内容的同级元素,而不是作为试图接受子元素的父元素。
<div className="App">
<GlobalStyles />
<h1>This is a test line</h1>
</div>
关于javascript - 样式化组件 v5.3 createGlobalStyles 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68154191/