CSS variables override not working with Vite

[pavankjadda]

Steps to reproduce

Link to live example: (required) StackBlitz: https://stackblitz.com/edit/github-8oqtfo?file=src%2Fmain.tsx CodeSandbox: https://codesandbox.io/p/github/pavankjadda/mui-css-variables/draft/quizzical-ritchie Github: https://github.com/pavankjadda/mui-css-variables

Steps:

1. Clone repo https://github.com/pavankjadda/mui-css-variables
2. Run the project with npm run dev

Current behavior

Color overriden in theme is not being applied

Expected behavior

Overridden color should apply as expected

Context

1. I defined reusable Manage button in a react library with below code
2. In my application I try to use as <ManageButton onClick={() => console.log('Button clicked')}>Library Button</ManageButton>
3. The application themed via CSS variables and new theme created by overwriting default color palette. But in my app I see default primary color instead of overwritten color

This works in react-scripts+MUI project not with vite+MUI

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.7 Binaries: Node: 22.10.0 - ~/.nvm/versions/node/v22.10.0/bin/node npm: 10.9.0 - ~/.nvm/versions/node/v22.10.0/bin/npm pnpm: 9.12.2 - /opt/homebrew/bin/pnpm Browsers: Chrome: 129.0.6668.101 Edge: 130.0.2849.46 Safari: 18.0.1 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.59 @mui/core-downloads-tracker: 6.1.4 @mui/icons-material: ^6.1.4 => 6.1.4 @mui/lab: 6.0.0-beta.12 => 6.0.0-beta.12 @mui/material: ^6.1.4 => 6.1.4 @mui/private-theming: 6.1.4 @mui/styled-engine: 6.1.4 @mui/system: 6.1.4 @mui/types: 7.2.18 @mui/utils: 6.1.4 @types/react: ^18.3.10 => 18.3.11 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.5.3 => 5.6.3 ```

Search keywords: vite

[siriwatknp]

I think it's because your package is declaring @emotion/* @mui/* as direct dependencies https://github.com/js-smart/react-kit/blob/3beea4d34c59539af5445c09eb4cc73fba056b94/package.json#L14.

That's why the theming does not work because the component is using a different version. You should move the those dependencies to peerDependencies so that the project contain only one version of Emotion and Material UI.

[pavankjadda]

I think it's because your package is declaring @emotion/* @mui/* as direct dependencies https://github.com/js-smart/react-kit/blob/3beea4d34c59539af5445c09eb4cc73fba056b94/package.json#L14.

That's why the theming does not work because the component is using a different version. You should move the those dependencies to peerDependencies so that the project contain only one version of Emotion and Material UI.

I tried to add as peer deps at root package.json and react-kit package.json, both didn't work.