withStyles strips out properties attached directly to React components

[rsellucian]

Problem Statement

Hello. It appears that TSS withStyles strips out properties attached directly to the component that it modifies.

For example: it's a common practice in MUI to add a property called muiName to a component. We follow the same practice in our component library. Eg:

Backdrop.muiName = 'Backdrop';

However, when we run that component through withStyles to inject our styles, muiName is no longer attached to the returned component.

const StyledBackdrop = withStyles(Backdrop, styles);
console.log(StyledBackdrop.muiName); // <-- returns undefined

Is there a way to retain those properties?

Thanks in advance.

Example

If you create component like the one below, which wraps and modifies the MUI Backdrop component, then the muiName property does not survive the call to withStyles(Backdrop, styles).

import { default as MuiBackdrop } from '@mui/material/Backdrop';
import { withStyles } from 'tss-react/mui';

const styles = () => ({
    root: {
        backgroundColor: 'red'
    }
});

const Backdrop = props => {

    const classOverrides = {
        root: props.classes.root,
    };

    return (
        <MuiBackdrop
            {...props}
            classes={classOverrides}
        />
    );
};

Backdrop.muiName = 'Backdrop';

export default withStyles(Backdrop, styles);