css - 尝试导入错误 : 'createGlobalStyle' is not exported from 'styled-components'

Question

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

非常感谢任何帮助

Answer 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')
)