[Typography] Apply font properties to typography inherit variant (#33621

)
mui · Mar 14, 2023 · c1a5203 · c1a5203
1 parent 914ece7
commit c1a5203
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 1 deletion.
diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js
@@ -246,7 +246,7 @@ describe('[Material UI] CssVarsProvider', () => {
       );
 
       expect(container.firstChild?.textContent).to.equal(
-        'htmlFontSize,pxToRem,fontFamily,fontSize,fontWeightLight,fontWeightRegular,fontWeightMedium,fontWeightBold,h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,button,caption,overline',
+        'htmlFontSize,pxToRem,fontFamily,fontSize,fontWeightLight,fontWeightRegular,fontWeightMedium,fontWeightBold,h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,button,caption,overline,inherit',
       );
     });
   });

diff --git a/packages/mui-material/src/styles/createTypography.js b/packages/mui-material/src/styles/createTypography.js
@@ -72,6 +72,13 @@ export default function createTypography(palette, typography) {
     button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
     caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
+    inherit: {
+      fontFamily: 'inherit',
+      fontWeight: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      letterSpacing: 'inherit',
+    },
   };
 
   return deepmerge(

diff --git a/packages/mui-material/src/styles/createTypography.test.js b/packages/mui-material/src/styles/createTypography.test.js
@@ -74,6 +74,15 @@ describe('createTypography', () => {
     );
   });
 
+  it('should apply font CSS properties to inherit variant', () => {
+    const typography = createTypography(palette, {});
+    const fontProperties = ['fontFamily', 'fontWeight', 'fontSize', 'lineHeight', 'letterSpacing'];
+
+    fontProperties.forEach((prop) => {
+      expect(typography.inherit[prop]).to.equal('inherit');
+    });
+  });
+
   describe('warnings', () => {
     it('logs an error if `fontSize` is not of type number', () => {
       expect(() => {

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.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -1,5 +1,6 @@
 import { expect } from 'chai';
 import createMixins from '@mui/material/styles/createMixins';
+import createTypography from '@mui/material/styles/createTypography';
 import createBreakpoints from '../createTheme/createBreakpoints';
 import styleFunctionSx from './styleFunctionSx';
 
@@ -419,4 +420,25 @@ describe('styleFunctionSx', () => {
       ).not.to.throw();
     });
   });
+
+  it('resolves inherit typography properties', () => {
+    const result = styleFunctionSx({
+      theme: { typography: createTypography({}, {}) },
+      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',
+    });
+  });
 });