useMergedClasses

This API is not deprecated but the new recommended way is to do:

-let { classes } = useStyles();
-classes = useMergedClasses(classes, props.classes);
+const { classes } = usesStyles(undefined, { props });

This would also work (mentioned just so you understand how it works):

const { classes } = usesStyles(
    undefined, 
    { "props": { "classes": props.classes } }
);

Merge the internal classes and the one that might have been provided as props into a single classes object.

This is the new way for Overriding styles - classes prop. See this issue.

import { useMergedClasses } from "tss-react";

type Props = {
    //classes?: { foo?: string; bar?: string; };
    classes?: Partial<ReturnType<typeof useStyles>["classes"]>;
};

function MyTestComponentForMergedClassesInternal(props: Props) {
    let { classes } = useStyles();
    classes = useMergedClasses(classes, props.classes);
    


    return (
        <div className={classes.foo}>
            <span className={classes.bar}>
                The background should be green, the box should have a dotted
                border and the text should be pink
            </span>
        </div>
    );
}

const useStyles = makeStyles()({
    "foo": {
        "border": "3px dotted black",
        "backgroundColor": "red"
    }
    "bar": {
        "color": "pink"
    }
});

//...

render(
    <MyTestComponentForMergedClassesInternal
        classes={{ "foo": css({ "backgroundColor": "green" }) }}
    />
);

Result

NOTE: You may end up with eslint warnings like this one if you deconstruct more that one item. Don't hesitate to disable eslint(prefer-const): Like this in a regular project, or like this in a CRA.