CSS Specificity is not working as expected.

The className passed in from the parent component is built first and overwritten by the existing button style, as expected.

vanilla-extract, module css both give the same result

function SomeButton() {
  return <Button className={styles.someButton}/> // I want this class to override the button's style
}

export const Button: PolymorphicComponent<ButtonProps, "button"> = forwardRef(
  ...
  ) => {
    //...

    return (
      <Box
        as={as}
        ref={ref}
        disabled={disabled}
        data-disabled={disabled}
        className={cn([
          styles.button({
            variant,
            block,
            size,
          }),

          className,
        ])}
        {...rest}
      />
    );
  },
);

import { ElementType, forwardRef, ReactNode } from "react";

export const Box: PolymorphicComponent<BoxProps> = forwardRef(
   //...
  ) => {
    const { as, ...rest } = props;
    const Component = as ?? "div";
    return <Component ref={ref}  {...rest} />;
  },
);

import clsx, { type ClassValue } from "clsx";

export function cn(...className: ClassValue[]) {
  return clsx(className);
}