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