Button | Typescript | Add TS overrides for top level button props (in addition to variant, color, and size)

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

theme.components.MuiButton.variants allows you to apply styles based on matching props. This works with arbitrary props, but the TS is only set up to let you add values to variant, color, and size. I believe adding new props here should be valid.

Examples 🌈

https://codesandbox.io/s/mui-5-custom-button-props-sd9pp?file=/src/App.js

Motivation 🔦

My app uses a standard and rounded version of each MUI Button variant. In v4 this was accomplished with a RoundedButton component which wrapped Button. I've been been looking forward to dropping RoundedButton in favor of v5 custom variants.

I found that adding additional variants is not really what I needed. I would need to add contained-rounded, outlined-rounded, and text-rounded, then I would need to duplicate styles from each of the default variants. Using a rounded prop handles this very naturally without needing to duplicate styles or have a wrapping component.

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { rounded: true }, // this works great! but there is no way to update the TS
          style: {
            borderRadius: 50
          }
        }
      ]
    }
  }
});

Button.d.ts already has ButtonPropsVariantOverrides, ButtonPropsColorOverrides, and ButtonPropsSizeOverrides. I'm proposing adding a top level ButtonPropsOverrides.

If you think this is a useful pattern, I'd be happy to make a PR updating the TS and adding an example to the docs.

Start with packages/mui-material/src/Button/Button.d.ts, especially the existing ButtonPropsVariantOverrides, ButtonPropsColorOverrides, and ButtonPropsSizeOverrides declarations. Review the theme.components.MuiButton.variants usage and the linked CodeSandbox example; done means arbitrary top-level button props are accepted by TypeScript and the documented example works.