diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js
index ce938d949b703a..fbf68ebe706430 100644
--- a/packages/mui-system/src/createStyled.js
+++ b/packages/mui-system/src/createStyled.js
@@ -192,23 +192,13 @@ export default function createStyled(input = {}) {
                   }
                   delete resolvedStyles['variants'];
                 }
-                let result = resolvedStyles;
-
                 const variantsStyles = variantsResolver(
                   props,
                   transformVariants(optionalVariants),
                   optionalVariants,
                 );
 
-                // the variantsStyle is an array of all variant styles that need to be applied,
-                // so we need to merge them on top of the rest of the styles
-                if (variantsStyles) {
-                  variantsStyles.forEach((variantStyle) => {
-                    result = deepmerge(result, variantStyle);
-                  });
-                }
-
-                return result;
+                return [resolvedStyles, ...variantsStyles];
               };
             } else if (isPlainObject(stylesArg)) {
               let transformedStylesArg = stylesArg;
@@ -220,7 +210,6 @@ export default function createStyled(input = {}) {
 
               if (styledArgVariants) {
                 transformedStylesArg = (props) => {
-                  console.log(props);
                   let result = stylesArg;
                   const variantStyles = variantsResolver(
                     props,
@@ -230,7 +219,6 @@ export default function createStyled(input = {}) {
                   variantStyles.forEach((variantStyle) => {
                     result = deepmerge(result, variantStyle);
                   });
-                  console.log(result);
 
                   return result;
                 };
@@ -286,23 +274,13 @@ export default function createStyled(input = {}) {
             }
             delete resolvedStyles['variants'];
           }
-          let result = resolvedStyles;
-
           const variantsStyles = variantsResolver(
             props,
             transformVariants(optionalVariants),
             optionalVariants,
           );
 
-          // the variantsStyle is an array of all variant styles that need to be applied,
-          // so we need to merge them on top of the rest of the styles
-          if (variantsStyles) {
-            variantsStyles.forEach((variantStyle) => {
-              result = deepmerge(result, variantStyle);
-            });
-          }
-
-          return result;
+          return [resolvedStyles, ...variantsStyles];
         };
       }
 
diff --git a/packages/mui-system/src/createStyled.test.js b/packages/mui-system/src/createStyled.test.js
index 5fdd01babb496c..337713628b7448 100644
--- a/packages/mui-system/src/createStyled.test.js
+++ b/packages/mui-system/src/createStyled.test.js
@@ -433,37 +433,39 @@ describe('createStyled', () => {
         ],
       });
 
-      // console.log("fn as arg");
-      // const TestFn = styled('div')(() => ({
-      //   variants: [{
-      //     props: { color: 'blue', variant: 'filled' },
-      //     styles: {
-      //       backgroundColor: 'rgb(0,0,255)'
-      //     }
-      //   }, {
-      //     props: { color: 'blue', variant: 'text' },
-      //     styles: {
-      //       color: 'rgb(0,0,255)'
-      //     }
-      //   }]
-      // }));
-
-      // console.log("string template as arg");
-      // const StringTemplate = styled('div')``;
-
-      // console.log("string template with callbacks");
-      // const StringTemplateWithCallbacks = styled('div')`
-      //   background-color: ${props => props.color === 'blue' ? 'rgb(0, 0, 255)' : 'transparent'}
-      // `;
-
-      // const Test = styled('div')(({ variant, color }) => ({
-      //   ...(color === 'blue' && variant === 'filled' && {
-      //     backgroundColor: 'rgb(0,0,255)'
-      //   }),
-      //   ...(color === 'blue' && variant === 'text' && {
-      //     color: 'rgb(0,0,255)'
-      //   }),
-      // }));
+      const { getByTestId } = render(
+        <>
+          <Test data-testid="filled" color="blue" variant="filled">
+            Filled
+          </Test>
+          <Test data-testid="text" color="blue" variant="text">
+            Filled
+          </Test>
+        </>,
+      );
+      expect(getByTestId('filled')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
+      expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 255)' });
+    });
+
+    it('should accept variants in function style arg', () => {
+      const styled = createStyled({ defaultTheme: { colors: { blue: 'rgb(0, 0, 255)' } } });
+
+      const Test = styled('div')(({ theme }) => ({
+        variants: [
+          {
+            props: { color: 'blue', variant: 'filled' },
+            style: {
+              backgroundColor: theme.colors.blue,
+            },
+          },
+          {
+            props: { color: 'blue', variant: 'text' },
+            style: {
+              color: theme.colors.blue,
+            },
+          },
+        ],
+      }));
 
       const { getByTestId } = render(
         <>
@@ -541,6 +543,13 @@ describe('createStyled', () => {
                 borderTopColor: 'rgb(0,0,255)',
               },
             },
+            // This is overriding the previous definition
+            {
+              props: { color: 'blue', variant: 'text' },
+              style: {
+                color: 'rgb(0,0,220)',
+              },
+            },
           ],
         },
       );
@@ -559,10 +568,58 @@ describe('createStyled', () => {
         </>,
       );
       expect(getByTestId('filled')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
-      expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 255)' });
+      expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 220)' });
       expect(getByTestId('outlined')).toHaveComputedStyle({ borderTopColor: 'rgb(0, 0, 255)' });
     });
 
-    // TODO: Add tests for priority of style definition
+    it('theme variants should override styled variants', () => {
+      const styled = createStyled({});
+
+      const Test = styled('div', { name: 'Test' })({
+        variants: [
+          {
+            props: { color: 'blue', variant: 'filled' },
+            style: {
+              backgroundColor: 'rgb(0,0,255)',
+            },
+          },
+          // This is overriding the previous definition
+          {
+            props: { color: 'blue', variant: 'text' },
+            style: {
+              color: 'rgb(0,0,255)',
+            },
+          },
+        ],
+      });
+
+      const { getByTestId } = render(
+        <ThemeProvider
+          theme={{
+            components: {
+              Test: {
+                variants: [
+                  {
+                    props: { variant: 'text', color: 'blue' },
+                    style: {
+                      color: 'rgb(0,0,220)',
+                    },
+                  },
+                ],
+              },
+            },
+          }}
+        >
+          <Test data-testid="filled" color="blue" variant="filled">
+            Filled
+          </Test>
+          <Test data-testid="text" color="blue" variant="text">
+            Filled
+          </Test>
+        </ThemeProvider>,
+      );
+      expect(getByTestId('filled')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
+      expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 220)' });
+    });
   });
 });