[theme] Fix pseudo class overridden in variants

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Closes #26944

Problem:
You can see that the styles of pseudo classes of variants are not merged correctly here: https://codesandbox.io/s/musing-darkness-2cd8d?file=/src/App.js:119-613

Solution: Following @oliviertassinari 's suggestion (#26944 (comment)), using an array to store variant styles rather than an object does the fix.

@@ -33,7 +33,7 @@ const getVariantStyles = (name, theme) => {

 const variantsResolver = (props, styles, theme, name) => {
   const { styleProps = {} } = props;
-  let variantsStyles = {};
+  const variantsStyles = [];
   const themeVariants = theme?.components?.[name]?.variants;
   if (themeVariants) {
     themeVariants.forEach((themeVariant) => {
@@ -44,7 +44,7 @@ const variantsResolver = (props, styles, theme, name) => {
         }
       });
       if (isMatch) {
-        variantsStyles = { ...variantsStyles, ...styles[propsToClassKey(themeVariant.props)] };
+        variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
       }
     });
   }

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 8a608a6

[mnajdova]

Perfect! Let’s add test for this use-case, we can create a simple component that mimic the behavior of the button.

---

We can use something like this in the test:

https://codesandbox.io/s/long-hill-tiup4?file=/src/App.js

[mnajdova]

Perfect! I verified that the test indeed is failing on current next.

[oliviertassinari]

@hbjORbj Prefer this syntax:

It allows closing the underlying issue automatically once the PR is merged.