Overriding DefaultTheme with custom ThemeType only affects ThemeProvider and not styled components themselves.

[nat-foo]

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown

System:

• OS: macOS 13.4
• CPU: (10) arm64 Apple M2 Pro
• Memory: 1.23 GB / 16.00 GB
• Shell: 5.9 - /bin/zsh

  Binaries:

• Node: 20.2.0 - ~/.nvm/versions/node/v20.2.0/bin/node
• Yarn: 3.6.1 - ~/.nvm/versions/node/v20.2.0/bin/yarn
• npm: 9.6.6 - ~/.nvm/versions/node/v20.2.0/bin/npm
• pnpm: 8.11.0 - ~/.nvm/versions/node/v20.2.0/bin/pnpm

  npmPackages:

• styled-components: ^6.1.6 => 6.1.6

Reproduction

Code Sandbox Reproduction

Steps to reproduce

1. Setup a standard CRA app and install styled-components (tested with pnpm).
2. Paste this code into a file:

import styled, { ThemeProvider } from "styled-components"

type ThemeType = {
  test: string
  debug: string
}

declare module "styled-components" {
  export interface DefaultTheme extends ThemeType {}
}

export const CustomText = styled.p`
  // Does not raise type error
  ${(props) => props.theme.anythingiwantgoeshere.text.body.fontFamily.etc}
`

export const App = () => {
  return (
    <ThemeProvider
      theme={{
        text: {
          body: {
            fontFamily: `Raises type error: Type '{ text: { body: { fontFamily: string; }; }; }' is not assignable to type 'ThemeArgument'.
              Type '{ text: { body: { fontFamily: string; }; }; }' is missing the following properties from
              type 'DefaultTheme': test, debug`,
          },
        },
      }}
    />
  )
}

3. The first usage in CustomText will not result in a type error, but the second usage in ThemeProvider will.

Expected Behavior

Overriding the DefaultTheme interface in the way the docs provide (and in the type declaration for DefaultTheme itself) should result in being able to access the custom theme type when using styled.div${(props) => props.theme.etc}`.

Actual Behavior

It does not. Only the ThemeProvider seems to benefit from the custom typing.

Thanks for your time!

[quantizor]

Confirmed https://codesandbox.io/p/sandbox/wizardly-kapitsa-forked-7lcnhc?file=%2Fsrc%2FApp.tsx%3A11%2C1

Seems like the type is incorrectly widening, maybe because Props defaults to object.

[mosherc]

Yes, we've noticed this too on v6 that any property of theme is allowed.

// computed type of our custom theme:
const theme: {
    [x: string]: any; // any property is allowed incorrectly
    // all the other valid properties that still benefit from autocomplete
}

const Test = styled.div`
  color: ${({ theme }) => theme.gibberish.properties.that.dont.exist}; // incorrect types are OK
`;