我尝试从 styled-components 导入 createGlobalStyle,但它似乎不起作用。我安装了styled-components npm包,版本是@3.4.10。
const GlobalStyle = createGlobalStyle`
html {
height: 100%
}
* {
padding: 0;
margin: 0
}
`
export default GlobalStyle
上面的代码是我尝试导入 createGlobalStyle 的地方
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import GlobalStyle from './theme/globalStyles'
ReactDOM.render(
<React.StrictMode>
<App />
<GlobalStyle />
</React.StrictMode>,
document.getElementById('root')
)
这是我在其中使用 GlobalStyle 组件的 index.js 文件。
运行代码后出现以下错误:
./src/theme/globalStyles.js
Attempted import error: 'createGlobalStyle' is not exported from 'styled-components'.
非常感谢任何帮助
最佳答案
如果您使用 styled-components
版本 3.4.10
,那么您必须使用 injectGlobal
而不是 createGlobalStyle
,因为 createGlobalStyle
仅在 styled-components
的 v4 中发布。查看:[Deprecated] injectGlobal
因此,为了让您的代码正常工作,您必须更改一些内容:
import { injectGlobal } from 'styled-components';
const GlobalStyle = injectGlobal`
html {
height: 100%
}
* {
padding: 0;
margin: 0
}
`
export default GlobalStyle
在你的 index.ts
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import GlobalStyle from './theme/globalStyles'
ReactDOM.render(
<React.StrictMode>
<GlobalStyle /> // this comes first
<App />
</React.StrictMode>,
document.getElementById('root')
)
关于css - 尝试导入错误 : 'createGlobalStyle' is not exported from 'styled-components' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67771051/