Is there anyway in styled-components to extend createGlobalStyle

Question

I am importing GlobalStyle from a library which has been created using createGlobalStyle.

Is there any way to extend like ...

cont { GlobalStyle } from "another-library";
const exetendGlobal = styled(GlobalStyle)`
select {
background-color: #f60;
}`

Answer 1

I believe createGlobalStyle as a method is NOT extendable.

However, you could abstract the css from the other global style and include to get the desired effect...

SomeGlobalCss.js

import { css } from "styled-components"

Const SomeGlobalCss = css`
   body {
      background: red;
   }
`

export { SomeGlobalCss }

Then import and include in global file:

App.js

import { SomeGlobalCss } from "another-library"

const GlobalStyle = createGlobalStyle`

   ${ SomeGlobalCss } 

   body {
      background: green;
   }
`

export { GlobalStyle }

Here, you can then include SomeGlobalCss.js, wherever you wish...