Why the multiple class names be merged into a single one

[alixiashu]

Behavior

• Use the mergeStyleSets to generate 2 class names
• Use these 2 class names in a single component, like the button in my example
• The results would be
  • The styles defined in both classes take effect
  • But when I check the element class names in the "Elements" tab of dev tool, the only latter class name I write is reserved.

Repro

I wrote a sandbox for this feature.
There are 2 class names defined, which are a & b, both take effect.

But in the "Elements" tab, only "b" is left in the class name list.

[ValentinaKozlova]

It looks like you might want to use here mergeClasses. While mergeStyleSets focuses on combining style objects, mergeClasses is used to combine CSS class names generated by styling hooks.