Closed
Description
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:
- Clone repo https://github.com/pavankjadda/mui-css-variables
- 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
- I defined reusable Manage button in a react library with below code
- In my application I try to use as
<ManageButton onClick={() => console.log('Button clicked')}>Library Button</ManageButton> - 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