TS2339: Property theme does not exist on type ThemeArg trying to use callback themes

[bexsoft]

Steps to reproduce

TS2339: Property theme does not exist on type ThemeArg TS error is seen while trying to use the theme callback variables as stated in readme document using Vite

Steps to Reproduce:

1. Create a theme in pigment plugin inside vite.config.ts:

plugins: [
        pigment({theme: extendTheme({
                bgColor: "#f09",
                fontColor: "#000",
                borderColor: "#cdcdcd"
            })}),
        react(),
...

2. Go into your component file (in my case Box/index.tsx) and create a a Base component using the styled API and a callback function with theme as recommended in the mentioned README document

import {styled} from "@pigment-css/react";

const ButtonBase = styled('button')(({theme}) => ({
    padding: '10px 20px',
    borderRadius: 5,
    border: 'none',
    backgroundColor: 'blue',
    color: theme.bgColor,
    cursor: 'pointer',
    '&:hover': {
        backgroundColor: 'darkblue',
        border: `1px solid ${theme.borderColor}`
    }
}));

3. Observe that TS2339: Property theme does not exist on type ThemeArg error is seen in the editor and while trying to build the library by using yarn build in the vite env:

Current behavior

TS2339: Property theme does not exist on type ThemeArg error is seen during development & build. If the // @ts-expect-error comment comment is added, then the compiler and the build allows to continue and access the theme variables

Expected behavior

No errors should be seen

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 22.4.1 - ~/.nvm/versions/node/v22.4.1/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v22.4.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.138
    Edge: 128.0.2739.79
    Safari: 17.6
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/private-theming:  6.1.0 
    @mui/styled-engine:  6.1.0 
    @mui/system:  6.1.0 
    @mui/types:  7.2.16 
    @mui/utils:  6.1.0 
    @pigment-css/react:  0.0.22 
    @pigment-css/vite-plugin: ^0.0.22 => 0.0.22 
    @types/react: ^18.3.3 => 18.3.5 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.5.3 => 5.6.2 

Chrome Version 128.0.6613.121 (Official Build) (arm64)

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "extends": "./tsconfig.json",
  "include": ["lib"]
}

Search keywords: theme ThemeArg callback

[brijeshb42]

@siriwatknp Could you link to the doc or example where we augment the theme types ?

[brijeshb42]

@bexsoft Could you try to augment the types by referring to this example ?