CSS variables override not working with Vite #44175

pavankjadda · 2024-10-21T17:52:21Z

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

The text was updated successfully, but these errors were encountered:

siriwatknp · 2024-10-23T02:45:44Z

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 · 2024-10-23T06:04:57Z

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.

siriwatknp · 2024-10-25T04:51:56Z

Does it work with Next.js instead of Vite?

pavankjadda · 2024-10-25T10:51:27Z

Does it work with Next.js instead of Vite?

Haven't tried in Next.js but works in CRA. Not sure if the issue is with Vite.

pavankjadda · 2024-11-06T18:06:51Z

Does it work with Next.js instead of Vite?

Here is reproduction in next.js. It doesn't even compile and I see below error

Debugger attached.
   ▲ Next.js 15.0.2 (Turbopack)
   - Local:        http://localhost:4300

 ✓ Starting...
 ✓ Ready in 1043ms
Failed to download `Roboto` from Google Fonts. Using fallback font instead.
 ○ Compiling / ...
Debugger listening on ws://127.0.0.1:62277/526b3d54-de83-4b10-b213-c8304a366b05
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
 ✓ Compiled / in 1838ms
 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.


TypeError: Cannot read properties of null (reading 'registered')
    at <unknown> (file:///Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/@js-smart/react-kit/index.mjs:1185:49)
    at MuiButton-root (file:///Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/@js-smart/react-kit/index.mjs:1125:12)
 ⨯ Internal error: TypeError: Cannot read properties of null (reading 'registered')
    at /Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/@js-smart/react-kit/index.mjs:1185:49
    at MuiButton-root (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/@js-smart/react-kit/index.mjs:1125:12)
    at react-stack-bottom-frame (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:8792:18)
    at renderWithHooks (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4716:19)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5482:39)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at finishFunctionComponent (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4760:13)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5490:15)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at finishFunctionComponent (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4760:13)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5202:11)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderChildrenArray (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6060:9)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5812:13)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5240:11)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderChildrenArray (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6060:9)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5812:13)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5240:11)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5240:11)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderChildrenArray (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6060:9)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5812:13)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5240:11)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at finishFunctionComponent (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4760:13)
    at renderElement (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5202:11)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5799:22)
    at renderNodeDestructive (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5625:11)
    at renderNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6175:18)
    at renderChildrenArray (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6060:9)
    at retryNode (/Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5812:13)
 ⨯ TypeError: Cannot read properties of null (reading 'registered')
    at <unknown> (file:///Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/@js-smart/react-kit/index.mjs:1185:49)
    at MuiButton-root (file:///Users/jaddap2/WebstormProjects/mui-44175-nextjs/node_modules/@js-smart/react-kit/index.mjs:1125:12) {
  page: '/'
}
 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.


 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.


 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.


 ✓ Compiled /_error in 122ms
 GET / 500 in 2417ms
 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.


 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.


 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.


 ⚠ [next]/internal/font/google/roboto_20989dc1.module.css
Error while requesting resource
There was an issue establishing a connection while requesting https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.

github-actions · 2024-11-15T17:27:25Z

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.

Note

@pavankjadda How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

pavankjadda added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 21, 2024

zannager added package: system Specific to @mui/system customization: css Design CSS customizability labels Oct 22, 2024

zannager assigned siriwatknp Oct 22, 2024

siriwatknp added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 23, 2024

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Oct 23, 2024

pavankjadda closed this as completed Nov 15, 2024

github-actions bot removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS variables override not working with Vite #44175

CSS variables override not working with Vite #44175

pavankjadda commented Oct 21, 2024 •

edited by github-actions bot

Loading

siriwatknp commented Oct 23, 2024

pavankjadda commented Oct 23, 2024 •

edited

Loading

siriwatknp commented Oct 25, 2024

pavankjadda commented Oct 25, 2024

pavankjadda commented Nov 6, 2024

github-actions bot commented Nov 15, 2024

CSS variables override not working with Vite #44175

CSS variables override not working with Vite #44175

Comments

pavankjadda commented Oct 21, 2024 • edited by github-actions bot Loading

Steps to reproduce

Current behavior

Expected behavior

Context

Your environment

siriwatknp commented Oct 23, 2024

pavankjadda commented Oct 23, 2024 • edited Loading

siriwatknp commented Oct 25, 2024

pavankjadda commented Oct 25, 2024

pavankjadda commented Nov 6, 2024

github-actions bot commented Nov 15, 2024

pavankjadda commented Oct 21, 2024 •

edited by github-actions bot

Loading

pavankjadda commented Oct 23, 2024 •

edited

Loading