尝试导入错误：“createGlobalStyle”未从“样式组件”导出

Posted 2023-03-07

【中文标题】尝试导入错误：“createGlobalStyle”未从“样式组件”导出

【英文标题】：Attempted import error: 'createGlobalStyle' is not exported from 'styled-components'

【发布时间】：2021-08-18 14:26:08

【问题描述】：

我尝试从 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'.

任何帮助将不胜感激

【参考方案1】：

如果您使用的是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')
)

【讨论】：

非常感谢，它成功了！！！，我对样式组件完全陌生，这就是我感到困惑的原因。

@OybekToshmatov 不客气。您绝对应该更新到较新的版本，因为这个版本已经有一些不推荐使用的功能。