Internal-import error: injectGlobal is not exported from styled- Components

For example, Styled Components and reset.css are used in combination

According to the video process:

1. Install styled- Components first

cnpm add styled-componen
Copy the code

2. Then change the CSS file to js file style.js and edit the code:

import { injectGlobal } from 'styled-components'

injectGlobal ` body{ margin:0; padding:0; } `;
Copy the code

Running at this point will report an error in the title.

Error cause:

The website links

The injectGlobal has been abolished and implemented in a new way.

Solution:

Styled components are installed as in the video and the CSS file is changed to the js file style.js. In style.js, use the createGlobalStyle method instead and change its usage accordingly:

The specific code is:

import { createGlobalStyle } from 'styled-components'

export const GlobalStyled = createGlobalStyle` body{ margin:0; padding:0; background:green; } `;
Copy the code

You also need to reference index.js and add the corresponding component as follows:

import React from 'react';
import {GlobalStyled} from './style.js';

function App() {
  return (
    <div>
      <GlobalStyled />
      hello world
    </div>
  );
}

export default App;
Copy the code