Why am I getting parsing error with GlobalStyles in styled-components? - reactjs

Question

import { createGlobalStyle } from "styled-components";
import { GlobalStyles } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
},
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
},
p {
opacity: 0.6;
line-height: 1.5;
},
image {
max-width: 100%;
},
`;
export default GlobalStyles;
import { Container } from "./components/styles/Container.styled";
import Header from "./components/Header";
import GlobalStyles from "./components/styles/Global";
function App()
{
return (
<>
<GlobalStyles />
<Header />
<Container>
<h1>Hello World</h1>
</Container>
</>)
}
export default App;
I am trying to use GlobalStyles from 'styled-components' and want to change something within it. However, I took this kind of error: I am taking this error when I am trying to use GlobalStyles ERROR in src/components/styles/Global.js
Line 4:6: Parsing error: Identifier 'GlobalStyles' has already been declared. (4:6).
Does anyone know the answer?

Answer 1

I think the problem is from this
import { createGlobalStyle } from "styled-components";
import { GlobalStyles } from "styled-components";
you only need to import createGlobalStyle instead of both
import { createGlobalStyle } from "styled-components";
By the way, GlobalStyles is not existing in styled-components. I think it's invalid to import. The document for reference
The full fix can be
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
},
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
},
p {
opacity: 0.6;
line-height: 1.5;
},
image {
max-width: 100%;
},
`;
export default GlobalStyles;

Answer 2

You are declaring twice GlobalStyles, one when you import it and another as a const variable. You have to delete the second line with the import and also delete the comas at the end of every selector on the styled component.
here is your code fixed:
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
}
p {
opacity: 0.6;
line-height: 1.5;
}
image {
max-width: 100%;
}
`;
export default GlobalStyles;