Typography: fix styleOverrides and variants to work

They were being overridden by the system props.

Author: emillaine

packages/mui-material/src/Typography/Typography.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_extendSxProp as extendSxProp } from '@mui/system';
+import { getPath } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
@@ -28,6 +28,7 @@ const useUtilityClasses = (ownerState) => {
 export const TypographyRoot = styled('span', {
   name: 'MuiTypography',
   slot: 'Root',
+  shouldForwardProp: (prop) => rootShouldForwardProp(prop) && prop !== 'color',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
 
@@ -42,6 +43,7 @@ export const TypographyRoot = styled('span', {
   },
 })(({ theme, ownerState }) => ({
   margin: 0,
+  color: getPath(theme, `palette.${ownerState.color}`, false) || ownerState.color,
   ...(ownerState.variant && theme.typography[ownerState.variant]),
   ...(ownerState.align !== 'inherit' && {
     textAlign: ownerState.align,
@@ -87,26 +89,27 @@ const transformDeprecatedColors = (color) => {
 };
 
 const Typography = React.forwardRef(function Typography(inProps, ref) {
-  const themeProps = useThemeProps({ props: inProps, name: 'MuiTypography' });
-  const color = transformDeprecatedColors(themeProps.color);
-  const props = extendSxProp({ ...themeProps, color });
+  const props = useThemeProps({ props: inProps, name: 'MuiTypography' });
 
   const {
     align = 'inherit',
     className,
+    // eslint-disable-next-line react/prop-types
+    color,
     component,
     gutterBottom = false,
     noWrap = false,
     paragraph = false,
     variant = 'body1',
     variantMapping = defaultVariantMapping,
+    sx,
     ...other
   } = props;
 
   const ownerState = {
     ...props,
     align,
-    color,
+    color: transformDeprecatedColors(color),
     className,
     component,
     gutterBottom,
@@ -129,6 +132,11 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
       ref={ref}
       ownerState={ownerState}
       className={clsx(classes.root, className)}
+      color={color}
+      sx={[
+        ...(!Object.keys(colorTransformations).includes(color) ? [{ color }] : []),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
       {...other}
     />
   );

test/regressions/fixtures/TypographyColor/TypographyColor.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
+export default function TypographyColor() {
+  return (
+    <div>
+      <ThemeProvider
+        theme={createTheme({
+          components: {
+            MuiTypography: {
+              styleOverrides: {
+                root: ({ ownerState, theme }) => ({
+                  ...(ownerState.color === 'secondary.main' && {
+                    color: theme.palette.error.main,
+                  }),
+                }),
+              },
+              variants: [
+                {
+                  props: { color: 'textPrimary' },
+                  style: ({ theme }) => ({
+                    color: theme.palette.warning.main,
+                  }),
+                },
+              ],
+            },
+          },
+        })}
+      >
+        <Typography>default</Typography>
+        <Typography color="primary">primary</Typography>
+        <Typography color="secondary">error (styleOverride)</Typography>
+        <Typography color="textPrimary">warning (variant)</Typography>
+      </ThemeProvider>
+      <ThemeProvider
+        theme={createTheme({
+          components: {
+            MuiTypography: {
+              styleOverrides: {
+                root: {
+                  color: '#fbca04',
+                },
+              },
+            },
+          },
+        })}
+      >
+        <Typography>#fbca04</Typography>
+        <Typography color="#ff5252">#ff5252</Typography>
+        <Typography sx={{ color: '#ff5252' }}>#ff5252</Typography>
+        <Typography sx={(theme) => ({ color: theme.palette.secondary.main })}>secondary</Typography>
+        <Typography sx={{ color: (theme) => theme.palette.error.main }}>error</Typography>
+      </ThemeProvider>
+    </div>
+  );
+}