MUI Strange Code in Button Component , hope anyone can explain

Question

this is some code from material UI githubs mui line 13

after bable2016 compiled this code is like:

(0, _extends2.default)({}, theme.typography.button, ...)

what's this grammer ? anyone ever seem?

whole section after compiled . the compile is successed but I am still comfused var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

  root: (0, _extends2.default)({}, theme.typography.button, {
      boxSizing: 'border-box',
      minWidth: 64,
      minHeight: 36,
      padding: '8px 16px',
      borderRadius: theme.shape.borderRadius,
      color: theme.palette.text.primary,
      transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
        duration: theme.transitions.duration.short
      }),

Ryan Cogswell · Accepted Answer · 2019-07-22T21:29:32.940

The syntax in the first part of the following

(0, _extends2.default)({}, theme.typography.button, ...)

is using the comma operator.

The reason for using it is explained here: Why does babel rewrite imported function call to (0, fn)(...)?.

Except for subtleties regarding this that don't matter in this case, it is basically equivalent to the following:

_extends2.default({}, theme.typography.button, ...);

The use of the extends function is replacing the use of object spread syntax for including everything in theme.typography.button in Button's "root" style rule. extends is very similar to Object.assign.

MUI Strange Code in Button Component , hope anyone can explain

1 Answers1