Add global override option in theme.components to style all MUI components at once

[karas-naeem]

Summary

Requesting a feature to add a global override option inside theme.components that applies styleOverrides or defaultProps to all Material-UI components simultaneously, reducing repetitive code and simplifying theming.

Examples

createTheme({
components: {
allComponents: {
styleOverrides: {
root: {
fontFamily: "alexandria !important",
color: "#333",
},
},
defaultProps: {
disableRipple: true,
},
},
},
});

Motivation

Developers often need to apply shared styles (like fonts, colors, margins) across many MUI components.

Currently, it requires repeating the same styleOverrides/defaultProps for every component individually.

A global override feature would reduce boilerplate code, improve maintainability, and enhance developer experience.

Aligns with best practices such as DRY (Don't Repeat Yourself).

Makes theming faster and less error-prone when updating shared styles.

Search keywords: MUI theme global override, components override all, MUI styleOverrides global, theme components all components, MUI DRY theme, MUI global styles

[brijeshb42]

What you can do is re-use variables with same value and assign it to the relevant component/slots like

const overrideStyles = {};
createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: overrideStyles,
      },
    },
    MuiChip: {
      styleOverrides: {
        slotName: overrideStyles,
      },
    },
  },
});

While this is not the ideal solution for you, this'll work without you repeating the styles. You could also implement and alternate using a forEach/reduce where you specify the component and slot names and construct the object iterating on that.