CreateTheme Breaks overrides

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Create an css file to override mui classes
   example:

.css-1hgf8cx-MuiInputBase-root-MuiOutlinedInput-root .MuiInputBase-input {
  color: var(--text);
}

3. create a theme
4. change typography fontfamily

Current behavior 😯

I currently Have a mui theme for my typography and am currently trying to add font family.

export const theme = createTheme({
  palette: {
    primary: blue,
    secondary: deepPurple,
  },
  typography: {
    allVariants: {
      color: "var(--text)",
      // breaks overrides
      fontFamily: "var(--fontFamilyTitle)",
    },
  },
});

Expected behavior 🤔

The intended functionality is to change the font family for my typography which it does...however for some reason adding a font family to my theme for typography breaks my override css.

vs without the font family in theme

Context 🔦

I currently have root css variables that are used when overriding mui classes for
certain things like input box border colors etc, I went to change the font family in create theme and my overrides no longer work. I went into the Inspector to look at the styles applied to the input that I override and all the sudden my override.css isnt even one of the styles that are applied at all.

Additionally I am following this stack overflow thread https://stackoverflow.com/questions/48319372/changing-font-family-of-all-mui-components.

For some reason if I make the font family like this.

      fontFamily: `"Roboto", "Helvetica", "Arial", sans-serif`,

I have no issues, I really dont understand what the problem is.