[Theming] Apply styles to multiple Components

In my theme.js file where I define my global Mui styles, I would like to be able to do something like the following in order to reduce code repetition and make my files shorter:

--- SNIP ---
  components: {
    MuiListItemButton, MuiMenuItem: {
      defaultProps: {
        component: LinkBehavior,
      },
    },
  }
--- SNIP ---

When I try the above, I get the following error message:

ReferenceError: MuiListItemButton is not defined

Why is it not possible in this object to state more than one key?

[michaldudak]

What you’re proposing is a shorthand property initializer introduced in ES2015 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015).

It translates to

components: {
  MuiListItemButton: MuiListItemButton,
  MuiMenuItem: {
    defaultProps: {
      component: LinkBehavior,
    },
  },
}

and, if MuiListItemButton is not defined in this scope, the runtime rightfully complains.

[michaldudak]

Shorthand property initializer is a feature of ECMAScript, so you can use it in projects with MUI. It just does not work (by design) the way you would like.