Migrating CSS variables in mui/material version 5 to using the OOB way of CSS variables in version 6

[noobDev31]

What's the problem?

I am trying to migrate our way of doing css variables with theme in V5 to use the newer way of CSS variables in V6.
I am having the following themeProvider config which uses the css variables how can i utilises the new css theme variable flag to maintain my functionality

https://stackblitz.com/edit/react-sbuu88?file=ThemeProvider.tsx,Demo.tsx,ThemeProvider.config.ts,coreBadge.ts,coreAlert.ts,coreAutocomplete.ts,dsmConfig.ts,coreAppBar.ts,tsconfig.json,index.html

What are the requirements?

Want to use the best practises on the Material UI V6 for utilizing the css theme variables

What are our options?

No response

Proposed solution

No response

Resources and benchmarks

No response

Search keywords:

[noobDev31]

Also if you see coreAutoComplete.ts on line 160 i start to get errors like these -

Any particular best way that I can avoid them because the theme variables are mostly Record<string, string>?

[mj12albert]

Want to use the best practises on the Material UI V6 for utilizing the css theme variables

Generally, the best practice is just to follow the docs 😅 :

• Theming/CSS theme variables: https://mui.com/material-ui/customization/theming/#css-theme-variables
• Specifically related to migrating from v5, the steps here: https://mui.com/material-ui/migration/upgrade-to-v6/#cssvarsprovider-and-extendtheme

[mj12albert]

Also if you see coreAutoComplete.ts on line 160 i start to get errors like these -

Sorry there's a lot of other stuff in your stackblitz, would you mind making a minimal repro? (here are some tips) @noobDev31

[noobDev31]

Also if you see coreAutoComplete.ts on line 160 i start to get errors like these -

Sorry there's a lot of other stuff in your stackblitz, would you mind making a minimal repro? (here are some tips) @noobDev31

https://stackblitz.com/edit/react-sbuu88?file=ThemeProvider.tsx,Demo.tsx,ThemeProvider.config.ts,coreAutocomplete.ts,dsmConfig.ts,tsconfig.json,index.html

Do you think the above is a bit more minimal than before? (Please read the comment on line 21 to 24 of coreAutocomplete.ts)
The problem is that the dsmConfig for the colors is a type of Record<string, string> , but the theme interface on MUI usually expects a certain color from the palette so that's why the error comes up

Do you think i should create my own definition of Theme but I am not sure how that is possible with the module augmentation logic for different special colors that MUI recommends.

That's why i specifically asked about the theme css variables because that's what is causing me like more than 100 errors in a lot of components.

if you have any further questions feel free to ask about the code above 😄

[mj12albert]

OK I don't think this is an issue with Material UI, but my opinionated take is that this whole DSMconfig thing in your sandbox is a bit over-complicated/over-engineered.

Per your comment here, this is not a good way to fix it, but if you go down this route I don't see how it can be avoided

// so basically here if I do
      //    let backgroundColor = `${
      //      (theme.palette?.[DSMConfig.autocompleteSelectedColor as keyof Palette] as PaletteColor)?.main
      //    }`;
      // this fixes the below issue but its not a good way to fix it.
      let backgroundColor = `${
        theme.palette?.[DSMConfig.autocompleteSelectedColor]?.main
      }`;

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.