custom css variable don't override all styles

[violabg]

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/github-j7eeqn?file=src%2Ftheme.tsx

Steps:

1. run the project

Current behavior

I overwrote the
--mui-palette-primary-main with custom color

but icons and Switch components still show the default

Expected behavior

the --mui-palette-primary-main color should be applied to all components

also in order to override the style I had to use !important is this correct or I'm doing something wrong

Context

No response

Your environment

No response

Search keywords: css variables

[mj12albert]

is this correct or I'm doing something wrong

@violabg The recommended way is to configure everything in createTheme 😬

const theme = createTheme({
  cssVariables: true,
  palette: {
    primary: {
      main: '#ffc627',
    },
  },
});

See the docs here: https://mui.com/material-ui/customization/palette/#customization

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[violabg]

I'm referring to https://mui.com/material-ui/customization/css-theme-variables/usage/#getting-started

that explicitly says

import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({ cssVariables: true });

function App() {
  return <ThemeProvider theme={theme}>{/* ...your app */}</ThemeProvider>;
}

:root {
  --mui-palette-primary-main: #1976d2;
  --mui-palette-primary-light: #42a5f5;
  --mui-palette-primary-dark: #1565c0;
  --mui-palette-primary-contrastText: #fff;
  /* ...other variables */
}

so I still think there is a bug with the disabled Switch component.

regarding the icons problem I realised that I need to use theme.var in order to access the variable value

[mj12albert]

That CSS snippet is an example of the CSS generated by configuring your colors in createTheme, you're not meant to manually import a css file like that ~