Repository navigation
[theme][typescript] Wrong types when using CSS Vars #49474
Description
Steps to reproduce
Steps:
- Open this link to live example: https://stackblitz.com/edit/github-xpjupurj?file=src%2FApp.tsx
- Notice the type on
theme.vars.zIndex.appBarisnumberbut should bestring
Current behavior
The type on theme.vars.zIndex.appBar is number
Expected behavior
The type on theme.vars.zIndex.appBar should be string
Context
No response
Your environment
npx @mui/envinfo
System:
OS: Linux 7.2 Fedora Linux 44 (Workstation Edition)
Binaries:
Node: 24.22.0 - /home/olivier/.local/share/vite-plus/js_runtime/node/24.22.0/bin/node
npm: 12.0.2 - /home/olivier/.local/share/vite-plus/package_manager/npm/12.0.2/npm/bin/npm
pnpm: Not Found
Browsers:
Chrome: canary
Firefox: 158.0
Vivaldi: 152
npmPackages:
@base-ui/utils: 0.3.2
@emotion/react: 11.14.0
@emotion/styled: 11.14.1
@mui/core-downloads-tracker: 9.4.0
@mui/icons-material: 9.4.0 => 9.4.0
@mui/lab: 9.0.0-beta.9 => 9.0.0-beta.9
@mui/material: 9.4.0 => 9.4.0
@mui/private-theming: 9.4.0
@mui/styled-engine: 9.4.0
@mui/system: 9.4.0
@mui/types: 9.4.0
@mui/utils: 9.4.0
@mui/x-charts: 9.13.0 => 9.13.0
@mui/x-charts-vendor: 9.13.0
@mui/x-data-grid: 9.13.0
@mui/x-date-pickers: 9.13.0
@mui/x-internal-gestures: 9.13.0
@mui/x-internals: 9.14.0
@mui/x-virtualizer: 0.7.1
@types/react: 19.3.0 => 19.3.0
react: 19.3.0 => 19.3.0
react-dom: 19.3.0 => 19.3.0
typescript: ^6.0.0 => 6.0.3
Search keywords: css vars, theme, types
Activity
lazerg commentedon Oct 16, 2026
It is a bug.
ThemeVarsin createThemeFoundation.ts reuses the regularZIndexinterface, where everything is anumber. ButzIndexisn't excluded in shouldSkipGeneratingVar, so at runtime eachtheme.vars.zIndex.*is a string like'var(--mui-zIndex-appBar, 1100)'.theme.vars.opacityhas the same problem. It's typed with the numericOpacityinterface but holds strings like'var(--mui-opacity-inputPlaceholder, 0.42)'. I checked both withcreateTheme({ cssVariables: true })on 9.4.0.theme.vars.shape.borderRadiusis fine, it's already typednumber | string.Module augmentation won't get you around this, since merging interfaces can't change the type of a property that already exists. Until the types are fixed, use
theme.zIndex.appBarif you need the actual number, ortheme.vars.zIndex.appBar as unknown as stringwhere you want the CSS variable.olivier-lxo commentedon Oct 16, 2026
Thank you. Indeed, more
numberproperties that have a css variable value have that problem.The
as unknown as stringworkaround does work. The actual problem is that you need to be aware of the wrong type as code will happily compile while being buggy otherwise.[-]Wrong types when using CSS Vars[/-][+][theme][typescript] Wrong types when using CSS Vars[/+]github-actions commentedon Oct 19, 2026
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@olivier-lxo Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.