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.

[siriwatknp]

The only way (at this moment) to extend props on a component is to wrap the component with styled api which I also think it is not a good experience.

// ButtonWithRounded.tsx
import { shouldForwardProp as baseShouldForwardProp } from '@mui/system';

const shouldForwardProp = prop => baseShouldForwardProp(prop) && prop !== 'rounded'; // to prevent the prop from spreading to DOM
const ButtonWithRounded = styled(Button, { shouldForwardProp })<{ rounded?: boolean }>(...)

export default ButtonWithRounded

and now you have to always import Button from this path instead of @mui/material/Button.

---

My proposed solution is to make props extendable at the global config level (cannot do it via theme), something like this:

import { NonForwardedProps } from '@mui/material';

// to not spread `rounded` prop to DOM
NonForwardedProps.set('Button', ['rounded']);

// to have typed safe, Button need to provide extra type that can be augmented
declare module '@mui/material/Button' {
  interface ButtonExtraProps {
    rounded?: boolean
  }
}

createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { rounded: true },
          style: {
            borderRadius: 50
          }
        }
      ]
    }
  }
})

Now, I can use the Button as usual.

import Button from '@mui/material/Button';

<Button rounded>Rounded</Button>

POC branch: https://github.com/siriwatknp/material-ui/commit/5d4a951d01a5827a5105c7b8e48289bdcde2edab

[duterte]

rounded can be done with something like this `<Button sx={{ borderRadius: 50 }}>Rounded</Button>

lol