尝试导入错误：'createGlobalStyle‘不是从'styled-components’导出的

Question

我正在尝试从样式化组件导入createGlobalStyle，但它似乎不起作用。我安装了样式组件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'.

如有任何帮助，将不胜感激

Answer 1

如果您正在使用styled-components版本3.4.10，那么您必须使用injectGlobal而不是createGlobalStyle，因为createGlobalStyle只在v4 of styled-components中发布。查看：[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')
)