Attempted import error: ‘injectglobal’ is not exported from ‘styled components’

I. Emergence of Problems:

    , in the previous project development, the error occurred when applying male-components , applying injectGlobal to define style variables, and injectGlobal 'is not exported from' application-components '.

Ii. Analysis and Solution of problems:
The reason for

    problem is that The injectGlobal API was removed and removed by createGlobalStyle in styled-components v4. API is removed and replaced by malt-components v4. Replaced with createGlobalStyle the new API appears as a style component and is introduced as a label based on the style component idea. InjectGlobal cannot be applied directly as the original injectGlobal. We define a global style variable that will be inserted into the document as a component. Solution:

The first step is to define the global style with createGlobalStyle and wrap the global style in it. Wrap the CSS style with the back-quotation string, as shown below:

import { createGlobalStyle } from 'styled-components'

export const Globalstyle = createGlobalStyle` 
body{
  margin: 0;
  padding: 0
 }`

The second step is to import the style in the project main file. The code is as follows:

import { Globalstyle } from './style'

The third step is introduced as a label in the form of a style component, as shown below:


class App extends Component {
  render () {
    return (
      <Fragment>
        <GlobalStyled/>
      </Fragment>
    )
  }
}

Read More: