Priority within className does not work properly. I wonder if this is the correct way to use it.

[heo-wonyoung]

As a Korean developer, I used a translator so the sentences may be incorrect.

export const SomeComponent = ({className}: {className: string}) => {
  return <div className={`${S.Container} ${className}`}>

  </div>
}

Like the code above, className is received as props and used.
However, the order that is actually applied is className > S.Container.
The style applied to className is applied first and S.Container cannot be overwritten.
I want to use S.Container by covering it with className, how can I do that?

[askoufis]

Ordering of classes in className does not affect how one CSS rule overrides another rule. That's determined by CSS ordering within stylesheets. So if you want S.Container override className, then you'll need to make sure the S.Container class is defined after the className class.

[heo-wonyoung]

I understand what you mean, so is there a good way to override the style externally in vanilla-extract?

[askoufis]

If you want to affect the order of classnames, you can do so by just declaring them in the order you want in the .css.ts file:

// Declared first, output first
export const style1 = style({});

// Declared second, output second
export const style2 = style({});

If the styles are in separate files, you'll need to ensure the style you want to apply first is imported/referenced before the other style. This could simply involve ensure your always import certain styles in your app entrypoint, or just swapping the order of some imports that already exist.