diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
index 61876b051e8bc8..398ebb0cc119d7 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
@@ -85,7 +85,7 @@ const AutocompleteListboxRoot = styled(StyledAutocompleteListbox, {
   name: 'JoyAutocompleteListbox',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 /**
  *
  * Demos:
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
index 3459caced27e6c..426ae8e5ec3b9a 100644
--- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
+++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
@@ -40,7 +40,7 @@ const AutocompleteOptionRoot = styled(StyledAutocompleteOption, {
   name: 'JoyAutocompleteOption',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 /**
  *
  * Demos:
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 2420ca1cc05760..7939b9f80c49c8 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -113,7 +113,7 @@ export const IconButtonRoot = styled(StyledIconButton, {
   name: 'JoyIconButton',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 const ButtonLoading = styled('span', {
   name: 'JoyIconButton',
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index a02823c6b2174d..09fffea757ee5f 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -212,25 +212,25 @@ const InputRoot = styled(StyledInputRoot, {
   name: 'JoyInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 const InputInput = styled(StyledInputHtml, {
   name: 'JoyInput',
   slot: 'Input',
   overridesResolver: (props, styles) => styles.input,
-})({});
+})();
 
 const InputStartDecorator = styled(StyledInputStartDecorator, {
   name: 'JoyInput',
   slot: 'StartDecorator',
   overridesResolver: (props, styles) => styles.startDecorator,
-})({});
+})();
 
 const InputEndDecorator = styled(StyledInputEndDecorator, {
   name: 'JoyInput',
   slot: 'EndDecorator',
   overridesResolver: (props, styles) => styles.endDecorator,
-})({});
+})();
 /**
  *
  * Demos:
diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
index 8e640c8502e1c7..1e3eb40a812eec 100644
--- a/packages/mui-joy/src/List/List.tsx
+++ b/packages/mui-joy/src/List/List.tsx
@@ -170,7 +170,7 @@ const ListRoot = styled(StyledList, {
   name: 'JoyList',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 /**
  *
  * Demos:
diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
index 650644850712ac..4b3fc8d11ed207 100644
--- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
+++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
@@ -31,7 +31,7 @@ const BreadcrumbsRoot = styled(Typography, {
   overridesResolver: (props, styles) => {
     return [{ [`& .${breadcrumbsClasses.li}`]: styles.li }, styles.root];
   },
-})({});
+})();
 
 const BreadcrumbsOl = styled('ol', {
   name: 'MuiBreadcrumbs',
diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.js b/packages/mui-material/src/DialogContentText/DialogContentText.js
index f9b4237a208051..199042440c322e 100644
--- a/packages/mui-material/src/DialogContentText/DialogContentText.js
+++ b/packages/mui-material/src/DialogContentText/DialogContentText.js
@@ -29,7 +29,7 @@ const DialogContentTextRoot = styled(Typography, {
   name: 'MuiDialogContentText',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 const DialogContentText = React.forwardRef(function DialogContentText(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiDialogContentText' });
diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index aabc346951caae..fd6c048b5d27e2 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -132,7 +132,7 @@ const InputInput = styled(InputBaseInput, {
   name: 'MuiInput',
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver,
-})({});
+})();
 
 const Input = React.forwardRef(function Input(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiInput' });
diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js
index 74a39c3c870886..3b72a1957ae109 100644
--- a/packages/mui-material/src/Menu/Menu.js
+++ b/packages/mui-material/src/Menu/Menu.js
@@ -41,7 +41,7 @@ const MenuRoot = styled(Popover, {
   name: 'MuiMenu',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 export const MenuPaper = styled(PopoverPaper, {
   name: 'MuiMenu',
diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
index 4de10704548665..8ab47b1e53aadc 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
@@ -97,7 +97,7 @@ const NativeSelectSelect = styled(StyledSelectSelect, {
       { [`&.${nativeSelectClasses.multiple}`]: styles.multiple },
     ];
   },
-})({});
+})();
 
 export const StyledSelectIcon = styled('svg')(({ theme }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events
@@ -149,7 +149,7 @@ const NativeSelectIcon = styled(StyledSelectIcon, {
       ownerState.open && styles.iconOpen,
     ];
   },
-})({});
+})();
 
 /**
  * @ignore - internal component.
diff --git a/packages/mui-material/src/Pagination/Pagination.js b/packages/mui-material/src/Pagination/Pagination.js
index 56e2610ee2b4e9..f50acc0e34ab1c 100644
--- a/packages/mui-material/src/Pagination/Pagination.js
+++ b/packages/mui-material/src/Pagination/Pagination.js
@@ -30,7 +30,7 @@ const PaginationRoot = styled('nav', {
 
     return [styles.root, styles[ownerState.variant]];
   },
-})({});
+})();
 
 const PaginationUl = styled('ul', {
   name: 'MuiPagination',
diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js
index 4c9aa9379a6d18..944b4be9a23663 100644
--- a/packages/mui-material/src/Popover/Popover.js
+++ b/packages/mui-material/src/Popover/Popover.js
@@ -74,7 +74,7 @@ export const PopoverRoot = styled(Modal, {
   name: 'MuiPopover',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 export const PopoverPaper = styled(PaperBase, {
   name: 'MuiPopover',
diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 6be1269727b656..e08995604db87f 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -44,7 +44,7 @@ const PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 /**
  *
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index b79a033c6eb4b2..52b112ae207f3a 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -53,7 +53,7 @@ const SelectIcon = styled(StyledSelectIcon, {
       ownerState.open && styles.iconOpen,
     ];
   },
-})({});
+})();
 
 const SelectNativeInput = styled('input', {
   shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'classes',
diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js
index f806bacde0c685..97cb2d35c2e3c4 100644
--- a/packages/mui-material/src/StepContent/StepContent.js
+++ b/packages/mui-material/src/StepContent/StepContent.js
@@ -52,7 +52,7 @@ const StepContentTransition = styled(Collapse, {
   name: 'MuiStepContent',
   slot: 'Transition',
   overridesResolver: (props, styles) => styles.transition,
-})({});
+})();
 
 const StepContent = React.forwardRef(function StepContent(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiStepContent' });
diff --git a/packages/mui-material/src/TablePagination/TablePagination.js b/packages/mui-material/src/TablePagination/TablePagination.js
index a1dcd83742388f..a3b9c59fd72e59 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.js
@@ -105,7 +105,7 @@ const TablePaginationMenuItem = styled(MenuItem, {
   name: 'MuiTablePagination',
   slot: 'MenuItem',
   overridesResolver: (props, styles) => styles.menuItem,
-})({});
+})();
 
 const TablePaginationDisplayedRows = styled('p', {
   name: 'MuiTablePagination',
diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js
index 4efdcc9124f01a..820e7e28e1ad28 100644
--- a/packages/mui-material/src/TextField/TextField.js
+++ b/packages/mui-material/src/TextField/TextField.js
@@ -37,7 +37,7 @@ const TextFieldRoot = styled(FormControl, {
   name: 'MuiTextField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).
diff --git a/packages/mui-system/src/createStyled/createStyled.js b/packages/mui-system/src/createStyled/createStyled.js
index de13ba0db574ef..43235e431daacf 100644
--- a/packages/mui-system/src/createStyled/createStyled.js
+++ b/packages/mui-system/src/createStyled/createStyled.js
@@ -165,9 +165,7 @@ export default function createStyled(input = {}) {
       return style;
     };
 
-    const muiStyledResolver = (expressionFirst, ...expressionsMiddle) => {
-      expressionFirst = transformStyle(expressionFirst)
-
+    const muiStyledResolver = (...expressionsMiddle) => {
       const expressionsHead = []
       const expressionsTail = []
 
@@ -210,23 +208,25 @@ export default function createStyled(input = {}) {
         expressionsTail.push(styleFunctionSx);
       }
 
-      // This function can be called as a tagged template, so `style` would contain CSS
-      // `string[]` values and `expressions` would contain the interpolated values.
-      if (Array.isArray(expressionFirst)) {
+      // This function can be called as a tagged template, so the first argument would contain
+      // CSS `string[]` values.
+      if (Array.isArray(expressionsMiddle[0])) {
+        const inputStrings = expressionsMiddle.shift();
+
         // We need to add placeholders in the tagged template for the custom functions we have
         // possibly added (attachTheme, overrides, variants, and sx).
         const placeholdersHead = new Array(expressionsHead.length).fill('');
         const placeholdersTail = new Array(expressionsTail.length).fill('');
 
-        let taggedStrings;
-        taggedStrings     = [...placeholdersHead, ...expressionFirst,     ...placeholdersTail];
-        taggedStrings.raw = [...placeholdersHead, ...expressionFirst.raw, ...placeholdersTail];
+        let outputStrings;
+        // prettier-ignore
+        {
+          outputStrings     = [...placeholdersHead, ...inputStrings,     ...placeholdersTail];
+          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
+        }
 
         // The only case where we put something before `attachTheme`
-        expressionsHead.unshift(taggedStrings)
-      } else {
-        // But otherwise, we always want attachTheme to stay first.
-        expressionsHead.push(expressionFirst)
+        expressionsHead.unshift(outputStrings)
       }
 
       const expressions = [
diff --git a/packages/mui-system/src/memoTheme.ts b/packages/mui-system/src/memoTheme.ts
index 2e141c00901d25..664fae046e1884 100644
--- a/packages/mui-system/src/memoTheme.ts
+++ b/packages/mui-system/src/memoTheme.ts
@@ -21,8 +21,7 @@ export default function memoTheme<T>(styleFn: ThemeStyleFunction<T>) {
     if (value === undefined || props.theme !== lastTheme) {
       arg.theme = props.theme;
 
-      value = styleFn(arg);
-      value = preprocessStyles(value);
+      value = preprocessStyles(styleFn(arg));
 
       lastValue = value;
       lastTheme = props.theme;
diff --git a/packages/mui-system/src/preprocessStyles.ts b/packages/mui-system/src/preprocessStyles.ts
index fea1e708a28174..12026923af579f 100644
--- a/packages/mui-system/src/preprocessStyles.ts
+++ b/packages/mui-system/src/preprocessStyles.ts
@@ -4,9 +4,9 @@ export default function preprocessStyles(styles: any) {
   const variants = styles.variants
 
   // Avoid passing `style.variants` to emotion, it will pollute the styles.
-  styles.variants = undefined
+  if (variants) { styles.variants = undefined }
   const serialized = internal_serializeStyles(styles) as any
-  styles.variants = variants
+  if (variants) { styles.variants = variants }
 
   // Not supported on styled-components
   if (serialized === styles) {
@@ -15,11 +15,9 @@ export default function preprocessStyles(styles: any) {
 
   if (variants) {
     variants.forEach((variant: any) => {
-      if (typeof variant.style === 'function') {
-        return variant
+      if (typeof variant.style !== 'function') {
+        variant.style = internal_serializeStyles(variant.style)
       }
-
-      variant.style = internal_serializeStyles(variant.style)
     })
 
     serialized.variants = variants
diff --git a/test/integration/mui-system/createStyled.test.js b/test/integration/mui-system/createStyled.test.js
index 50d68bab53983b..819d7c739c4760 100644
--- a/test/integration/mui-system/createStyled.test.js
+++ b/test/integration/mui-system/createStyled.test.js
@@ -38,7 +38,7 @@ describe('createStyled', () => {
       const styled = createStyled({});
       const SomeMuiComponent = styled(function SomeMuiComponent() {
         return null;
-      })({});
+      })();
 
       expect(SomeMuiComponent).to.have.property('displayName', 'Styled(SomeMuiComponent)');
     });
@@ -185,12 +185,12 @@ describe('createStyled', () => {
         styles.root,
         { [`& .MuiButton-avatar`]: styles.avatar },
       ],
-    })({});
+    })();
     const ButtonIcon = styled('span', {
       name: 'MuiButton',
       slot: 'Icon',
       overridesResolver: (props, styles) => styles.icon,
-    })({});
+    })();
     function Button({ children, startIcon, endIcon, color = 'primary', ...props }) {
       const ownerState = { startIcon, endIcon, color, ...props };
       return (