[Button] Can't override or extend button's size and variation values

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

The closest issue I found is https://github.com/mui-org/material-ui/issues/15573. I created this ticket still as the other doesn’t include the size property.

Current Behavior 😯

The Adapting the hoook API section shows a good example how to override or extend the color options. This feature would be interesting as well to allow adding sizes and with that other options such as variant.

If you try to override size, you might still be able to build, but you get No overload match this call. in your terminal and warnings in runtime.

Please check https://codesandbox.io/s/material-demo-forked-v7tpp?file=/demo.tsx to see the issue. This example is based on the Adapting the hoook API example.

Expected Behavior 🤔

I would like to customize the options to be able to simplify implementations by wrapping Material UI components as the example below:

<MyButton color="blue" size="humongous">Big Blue Button</MyButton>;

Steps to Reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/uou8w?file=/demo.tsx
2. Add size to Props
3. Voilà

Context 🔦

I would like to wrap components and override defaults reducing the setup in code for every component that relies on those new defaults.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
Browser	any
TypeScript	v4.0.3

[darlesson]

The issue is for example when you want to extend or replaces the options. 'tiny', 'small', 'medium', 'large', 'extra-large'. You can only use the 3 ones supported by Material-UI.

[gregg-cbs]

A solution to the OPs question using the global theme as he was asking. You can “extend” like this.

Assuming you are already using or know how to use the ‘createMuiTheme’, otherwise look into it.

// theme.js file
const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      sizeTiny: {}, // this needs to be here to allow size="tiny" prop to register
      root: {
        '&.MuiButton-sizeTiny': { // this is how you style it because some reason you cannot style the above sizeTiny:{}
          background: 'purple',
          padding: '4px'
        },
      },
    }
  }
});

<Button variant="contained" size="tiny" disableElevation>Im tiny</Button>

^ edit: I have noticed I get a warning in the console with the above:

Warning: Failed prop type: Invalid prop `size` of value `tiny` supplied to `ForwardRef(Button)`, expected one of ["large","medium","small"].

---

To the owners of this project, this type of extending should be much easier. I expected something like the following to work:

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      sizeTiny: {
        root: {
          background: 'purple',
          padding: '4px'
        }
      }
    }
  }
});