Typescript autocomplete does not work with extendTheme function's arguments.
See original GitHub issueDescription
When I use extendTheme with Typescript, I expected to autocomplete theme, but it doesn’t.
Link to Reproduction
https://codesandbox.io/s/quizzical-mclean-zewes?file=/src/index.tsx
Steps to reproduce
- use extendTheme function with override exist theme object
Chakra UI Version
1.6.6 (it works fine with 1.5.2)
Browser
Chrome
Operating System
- macOS
- Windows
- Linux
Additional Information
I think it’s probably related to this commit https://github.com/chakra-ui/chakra-ui/commit/1d5e55272fe1475ce6fa0ed5bdccef4218885f77
This may be a problem in typescript. This is the small code that reproduces this problem in typescript:
type BaseTheme = {
component?: string
}
declare function extendTheme<
Extensions extends (BaseTheme & Record<string, unknown>)[]
>(...extensions: [...Extensions]): Extensions
extendTheme({
})
Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:18 (6 by maintainers)
Top Results From Across the Web
Typescript function parameters type mapping [duplicate]
I wan't to do some type mapping with function parameters as belows: interface TestType { something: string; other: number; } function func<T ...
Read more >Color Mode
useColorMode is a React hook that gives you access to the current color mode, and a function to toggle the color mode. Toggle...
Read more >Strict mode - JavaScript - MDN Web Docs
Strict mode code doesn't sync indices of the arguments object with each parameter binding. In a sloppy mode function whose first argument is...
Read more >Extend Material-UI theme in TypeScript
The problem of Material-UI theme #. As I explained above, default Material-UI theme is bit limited like below. theme.ts theme.palette ├─── ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
In case anyone needs autocomplete in typescript for their extendTheme object, without using chakra cli, there’s a little ‘hack’ that mostly works.
There are two peculiarities with this approach: autocomplete isn’t available for the values of the tokens (i.e. 'color and ‘background’ will autocomplete, but ‘green’ and ‘yellow’ won’t - even though they are still valid) and there’s a syntax error for the components object - however, it seems to not matter, as the app will still compile and run just fine (if anyone knows why this components error exists, I’d be grateful).
It works well enough for me inside vscode, since all I needed was the type auto-completion.
Yes. I confirm that with
@chakra-ui/react@2.2.8
@chakra-ui/cli@2.1.6
after generate theme typing usingnpx chakra-cli tokens /path/to/theme.ts
, Vs Code autocomplete suggests all theme tokens values. (From chakra components like Box, Flex, …)