[docs] do slots in styleOverrides always support callbacks?

[GBvanDam]

Related page

https://mui.com/material-ui/customization/theme-components/#theme-style-overrides

Kind of issue

Missing information

Issue description

https://mui.com/material-ui/customization/theme-components/#theme-style-overrides is not saying anything about the support for callbacks on a slot in styleOverrides.

https://mui.com/material-ui/customization/theme-components/#the-sx-syntax-experimental not only introduced me to the experimental sx syntax (great one!), but also introduced me to using callbacks inside of slots in styleOverrides.

my use-case would be something like this:

const finalTheme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        icon: ({ theme }) => ({
          color: theme.vars.palette.primary.main
        })
      },
    },
  },
});

If this is possible, I would suggest https://mui.com/material-ui/customization/theme-components/#theme-style-overrides to tell about it! The same applies to the usage of variants, if you can utilise callbacks containing a theme in its style key, than I would suggest the docs to at least mention it briefly. Generically speaking; any place where this is possible might need a brief extra sentence that callbacks are supported.

Context

Here is the example I saw using the callbacks:

const finalTheme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        icon: ({ theme }) =>
          theme.unstable_sx({
            mr: 0.5,
            ml: '-2px',
          }),
      },
    },
  },
});

Search keywords: styleOverrides, callback

[siriwatknp]

At the moment, it's possible but the reason we don't document it because it might be removed in the future to be compatible with Pigment CSS. It's recommended to use variants instead so that the theme is static.

const finalTheme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        icon: {
          variants: [...]
        },
      },
    },
  },
});

[github-actions]

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

@GBvanDam 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.

[GBvanDam]

@siriwatknp that of course solves requirements like: make the border squared if variant equals 'outlined'. What is your advice on re-using css vars in your createTheme call? What I mean is that you are creating a theme where you first of all define colorSchemes, but then you're also overriding some components to use these colors (e.g. setting tab bgcolor to secondary.light).

I see 3 options right now:

• hardcode hexadecimals (bad choice)
• hardcode css vars (--palette-secondary-light)
• create local const variables that hold the color hexadecimals

What I liked about the (theme) => theme.vars.palette.primary.main approach is that Typescript/Next.js will fail if a color has been re-named or anything like that