tss-react style precedence incorrect makeStyles

[nikita-petko]

Context:

• Using Next.js
• MUI v5 (wrapped by a custom lib)

I have the following wrapped Muiv5 component:

const useAvatarStyles = makeStyles({ name: 'Avatar' })(
  (theme: Theme) => ({
    colorDefault: {
      ...theme.typography.avatarLetter,
      color:           theme.palette.content.standard,
      backgroundColor: theme.palette.components.avatar.fill,
    },
    rounded: {
      ...theme.border.radius.medium,
    },
  }),
);

const Avatar = forwardRef<HTMLDivElement, MuiAvatarProps>(
  function Avatar({ children, classes, className, ...rest }, ref) {
    const { classes: mergedClasses } = useAvatarStyles(undefined, {
      props: { classes: combineOverrides(classes, className) },
    });

    return (
      <MuiAvatar {...rest} classes={mergedClasses} ref={ref}>
        {children}
      </MuiAvatar>
    );
  },
);

Where it is used:

import { Avatar, Grid, NoSSR, Typography } from "@rbx/ui";
import { useTestStyles } from "./Test.styles";
import { Button } from "@rbx/foundation-ui";

const TestComponent: React.FC = () => {
    const {
        classes: {
            avatar,
        },
    } = useTestStyles();


    return (
        <Grid container direction="column" alignItems="center" justifyContent="center" spacing={2}>
            <Grid item>
                <Typography variant="h1">UI Blox Test</Typography>
            </Grid>
            <Grid item>
                <Button icon="icon-regular-speech-bubble-align-left" variant="Emphasis" size="Medium" onClick={() => alert("Button clicked!")}>
                    Click Me
                </Button>
            </Grid>
            <Grid item alignItems='center'>
                <Avatar className={avatar} alt='1'>
                    <Typography variant='captionHeader'>1</Typography>
                </Avatar>
                <Typography variant='h3'>Hello?</Typography>
            </Grid>
        </Grid>
    );
};

export default TestComponent;

Test.styles.ts:

import { makeStyles } from "@rbx/ui";

export const useTestStyles = makeStyles()((theme) => ({
  avatar: {
    backgroundColor: theme.palette.common.white,
    color: theme.palette.content.inverse,
    width: 30,
    height: 30,
    marginRight: 8,
  },
}));

The expected behavior here is that useTestStyles().classes.avatar should override that of useAvatarStyles's colourDefault, however the way the css classes are being placed into the style within the head are causing the opposite:

(avatar should take priority over avatarLetter here)

Expected case:

[garronej]

Hello @nikita-petko,

Are you using turbopack?
Because there is currently a known bug with turbopack in devlopement, see: #231 (comment)

[garronej]

Let me know if siwitching back to webpack fixes the issue.