🦱classes overrides

Overriding internal styles by user provided styles.

Every MUI components accepts a classes props that enables you override the internal styles (see MUI's doc).

With TSS you can easily do the same for your components, it's done by merging the internal classes and the one that might have been provided as props.

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

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

function MyComponent(props: Props) {
    const { classes } = useStyles({
       classesOverrides: 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

const useStyles = tss.create({
    "foo": {
        "border": "3px dotted black",
        "backgroundColor": "red"
    "bar": {
        "color": "pink"


        classes={{ "foo": css({ "backgroundColor": "green" }) }}


Last updated