Improve the sx config

mui · Mar 14, 2023 · 8b6f44a · 8b6f44a
1 parent 6f15212
commit 8b6f44a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js
@@ -1,9 +1,42 @@
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import { padding, margin } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
 import { borderRadius, borderTransform } from '../borders';
 import { gap, rowGap, columnGap } from '../cssGrid';
 import { paletteTransform } from '../palette';
 import { maxWidth, sizingTransform } from '../sizing';
 
+const createFontStyleFunction = (prop) => {
+  return (props) => {
+    if (props[prop] !== undefined && props[prop] !== null) {
+      const styleFromPropValue = (propValue) => {
+        let value =
+          props.theme.typography?.[
+            `${prop}${
+              props[prop] === 'default' || props[prop] === prop
+                ? ''
+                : capitalize(props[prop]?.toString())
+            }`
+          ];
+
+        if (!value) {
+          value = props.theme.typography?.[propValue]?.[prop];
+        }
+
+        if (!value) {
+          value = propValue;
+        }
+
+        return {
+          [prop]: value,
+        };
+      };
+      return handleBreakpoints(props, props[prop], styleFromPropValue);
+    }
+    return null;
+  };
+};
+
 const defaultSxConfig = {
   // borders
   border: {
@@ -283,15 +316,18 @@ const defaultSxConfig = {
   // typography
   fontFamily: {
     themeKey: 'typography',
+    style: createFontStyleFunction('fontFamily'),
   },
   fontSize: {
     themeKey: 'typography',
+    style: createFontStyleFunction('fontSize'),
   },
   fontStyle: {
     themeKey: 'typography',
   },
   fontWeight: {
     themeKey: 'typography',
+    style: createFontStyleFunction('fontWeight'),
   },
   letterSpacing: {},
   textTransform: {},

diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js
@@ -38,10 +38,6 @@ export function unstable_createStyleFunctionSx() {
       return null;
     }
 
-    if (themeKey === 'typography' && val === 'inherit') {
-      return { [prop]: val };
-    }
-
     const themeMapping = getPath(theme, themeKey) || {};
 
     if (style) {

diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -424,11 +424,21 @@ describe('styleFunctionSx', () => {
   it('resolves inherit typography properties', () => {
     const result = styleFunctionSx({
       theme: { typography: createTypography({}, {}) },
-      sx: { fontWeight: 'inherit' },
+      sx: {
+        fontFamily: 'inherit',
+        fontWeight: 'inherit',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        letterSpacing: 'inherit',
+      },
     });
 
     expect(result).deep.equal({
+      fontFamily: 'inherit',
       fontWeight: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      letterSpacing: 'inherit',
     });
   });
 });