--mui-* css vars are undefined when augmented theme contains property with URL value

Open
#48,267 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
52/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the linked StackBlitz example in src/App.tsx and reproduce the failure with cssVariables enabled and URL-valued theme properties. Trace the theme CSS-variable generation used by createTheme, then add or update a focused regression test for URL values. Done means MUI components remain styled and the generated --mui-* variables are defined, or a helpful error is reported.

Written by the indexing model from the issue text.

Description

customization: theme has workaround
Steps to reproduce

While attempting to adopt cssVars for an existing project, I believe I found a bug. When you augment the theme with properties, if the augmented property value contains a url (specifically the double slash), the --mui- css vars are undefined and thus the mui components are unstyled.

Steps:

  1. Open this link to live example: https://stackblitz.com/edit/github-r5aeyhfa?file=src%2FApp.tsx
  2. Notice the unstyled Buttons
  3. Uncomment the custom theme properties that do not contain urls.
  4. See properly styled buttons.

This seems to be the case in mui7 and mui9.
For the record, I am not wanting to access these values as cssVars, just via theme.propertyName.

Ideally, this either works or throws some sort of helpful error.

Here is the theme from the code example above:

const theme = createTheme({
  cssVariables: true,

  // Example: With Urls -> cssVars are UNdefined
  // Nested attribute object with property with a url = breaks css vars
  backgrounds: {
    default: 'https://picsum.photos/200/300',
  },
  // top level attribute with a url = breaks css vaers
  default_background: 'https://picsum.photos/200/300',

  // EXAMPLE: W/O URLS
  // Uncomment this and the cssVars are no longer undefined

  // backgrounds: {
  //   default: 'sunset.jpg',
  // },
  // default_background: 'sunset.jpg',
});
Current behavior

When a theme property contains a url (specifically a "//"), the --mui-* variables are undefined.

Expected behavior

The --mui-* them properties either are defined or there is a helpful compilation error. Alternately, a way to defined theme properties without having them need to be cssVars would be cool too.

Context

Theme contains images that are different per theme. The custom theme properties defined the path to these images.

Your environment
npx @mui/envinfo 
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: cssVars, theme augmentation

Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.