[system] Fix composeClasses v6 behavior change (#43537)

Author: oliviertassinari

packages/mui-utils/src/composeClasses/composeClasses.test.ts

@@ -13,8 +13,8 @@ describe('composeClasses', () => {
         undefined,
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root MuiTest-standard ',
-      slot: 'MuiTest-slot ',
+      root: 'MuiTest-root MuiTest-standard',
+      slot: 'MuiTest-slot',
     });
   });
 
@@ -32,8 +32,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root MuiTest-standard standardOverride ',
-      slot: 'MuiTest-slot slotOverride ',
+      root: 'MuiTest-root MuiTest-standard standardOverride',
+      slot: 'MuiTest-slot slotOverride',
     });
   });
 
@@ -51,8 +51,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root MuiTest-standard standardOverride ',
-      slot: 'MuiTest-slot slotOverride ',
+      root: 'MuiTest-root MuiTest-standard standardOverride',
+      slot: 'MuiTest-slot slotOverride',
     });
   });
 });

packages/mui-utils/src/composeClasses/composeClasses.ts

@@ -13,14 +13,16 @@ export default function composeClasses<ClassKey extends string>(
   for (const slotName in slots) {
     const slot = slots[slotName];
     let buffer = '';
+    let start = true;
 
     for (let i = 0; i < slot.length; i += 1) {
       const value = slot[i];
       if (value) {
-        buffer += getUtilityClass(value) + ' ';
+        buffer += (start === true ? '' : ' ') + getUtilityClass(value);
+        start = false;
 
         if (classes && classes[value]) {
-          buffer += classes[value] + ' ';
+          buffer += ' ' + classes[value];
         }
       }
     }