[material-ui][Typography] Color prop check for primitive type

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from 'test/utils';
 import Typography, { typographyClasses as classes } from '@mui/material/Typography';
+import sinon from 'sinon';
 
 describe('<Typography />', () => {
   const { render } = createRenderer();
@@ -112,6 +113,21 @@ describe('<Typography />', () => {
     });
   });
 
+  describe('prop: color', () => {
+    it('should check for invalid color value', () => {
+      const consoleErrorStub = sinon.stub(console, 'error');
+
+      render(
+        <Typography variant="h6" color="background">
+          Hello
+        </Typography>,
+      );
+
+      sinon.assert.called(consoleErrorStub);
+      consoleErrorStub.restore();
+    });
+  });
+
   it('combines system properties with the sx prop', () => {
     const { container } = render(<Typography mt={2} mr={1} sx={{ marginRight: 5, mb: 2 }} />);
 

packages/mui-system/src/style.js

@@ -39,6 +39,14 @@ export function getStyleValue(themeMapping, transform, propValueFinal, userValue
     value = transform(value, userValue, themeMapping);
   }
 
+  if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
+    // Log an error in development mode
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(`Invalid value "${value}" for property "${userValue}"`);
+    }
+    value = userValue;
+  }
+
   return value;
 }