Summary

This RFC proposes slightly different structure to the theme, by moving the components as first key, and nesting the existing keys (overrides, props and variants - will be added with #21648) inside. As we are doing this breaking change, we may even consider renaming the existing keys based on this #21012 (comment) to cssOverrides and defaultProps.

Changes

Current:

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        fontSize: 20,
      },
    },
  },
  props: {
    MuiButton: {
      disableFocusRipple: true,
    },
  },
  variants: {
    MuiButton: [
      {
        props: { variant: 'dashed' },
        styles: { border: '2px dashed grey' },
      }
    ],
  },
});

Proposed:

const theme = createMuiTheme({
  components: {
    MuiButton: {
      cssOverrides: {
        root: {
          fontSize: 20,
        },
      },
      defaultProps: {
        disableFocusRipple: true,
      },
      variants: [
        {
          props: { variant: 'dashed' },
          styles: { border: '2px dashed grey' },
        },
      ],
    },
  },
});

Motivation

Think component first.

With the proposed definition all theme definitions related to one component can be easily discovered and defined together. It's also interesting if later on, developers have a concern about tree-shaking and want to move the configuration from the theme singleton to wrapper components they import.

Drawbacks

Other than the change being breaking, I don't see any other drawback with the proposed restructuring.

Prio-arts

Same approach in

• https://www.vue-tailwind.com/
• https://next.chakra-ui.com/docs/theming/overview#where-to-put-the-style-config