TS error when referencing styled component within `createGlobalStyle`

[delijah]

System:

• OS: macOS 12.6.1
• CPU: (10) arm64 Apple M1 Max
• Memory: 4.84 GB / 32.00 GB
• Shell: 5.8.1 - /bin/zsh

  Binaries:

• Node: 16.20.1 - /usr/local/bin/node
• Yarn: 1.22.19 - /usr/local/bin/yarn
• npm: 8.19.4 - /usr/local/bin/npm

  npmPackages:

• babel-plugin-styled-components: 2.1.4 => 2.1.4
• styled-components: 6.1.0 => 6.1.0

Reproduction

https://codesandbox.io/s/gifted-newton-q7fd9d

Steps to reproduce

When referencing a styled component within createGlobalStyle, i get a ts error

Expected Behavior

No type error

Actual Behavior

Type error

[quantizor]

The error in your linked sandbox is just because you added a non-optional prop and then didn't compose the prop.

[delijah]

Thx for your reply. What do you mean by "composing" the prop? Could you provide an example?

The thing is: when i use that component in the context of react, if i render that component, that prop must exist, but if i just want to use that styled component as a selector, why should i get notified about missing props? This is what i do not understand here.

[minuz]

@delijah he means this:

import { render } from "react-dom";
import styled, { createGlobalStyle } from "styled-components";
import React from "react";

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const Title = styled.h1<{ $color: string }>` // <= this is the mandatory custom prop
  font-size: 1.5em;
  text-align: center;
  color: ${({ $color }) => $color};
`;

const GlobalStyle = createGlobalStyle<{$color: string}>` // <= it need to be propagated here
  ${Title} {
    background: white;
  }
`;

// Render these styled components like normal react components.
// They will pass on all props and work
// like normal react components – except they're styled!
const App = () => (
  <Wrapper>
    <GlobalStyle $color='blue' /> // <= and consumed here
    <Title $color="palevioletred">
      Hello World, this is my first styled component!
    </Title>
  </Wrapper>
);

render(<App />, document.getElementById("root"));