We have a UI library for our company filled with (styling) customisations on the Material UI components.

Currently I’m trying to move styling specific logic from custom styled components to the actual theme.components option in the ThemeProvider. That way we will ensure things like buttons etc are equal everywhere and we don’t have to export a custom Button that needs to be imported from our UI library. This is especially nice in case you use libraries like Refine, where you can’t always (easily) override components.

I’m running into the following problem:
We do sometimes have custom props/values that we declare on their specific typescript interfaces (e.g. I added ‘variant’ to the IconButton). These props however, get passed forward onto the DOM element, sometimes resulting in an error log (because it’s an invalid prop).
Is there a way to guard these from being passed through without having to have a custom component? Something like ‘shouldForwardProp’ that emotion has with their styled components?

I’ve tried looking around for an option, but have not yet found one.

declare module "@mui/material/IconButton" {
    interface IconButtonPropsColorOverrides extends CustomColorPropOverrides {}

    interface IconButtonPropsSizeOverrides {
        xs: true;
    }

    interface IconButtonOwnProps {
        variant?: ButtonProps["variant"];
        inverted?: boolean;
    }
}