[Typography] Improve inherit variant logic (#38123)

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
mui · Aug 3, 2023 · 6cd17b8 · 6cd17b8
1 parent 71ae440
commit 6cd17b8
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
@@ -43,7 +43,11 @@ export const TypographyRoot = styled('span', {
   },
 })(({ theme, ownerState }) => ({
   margin: 0,
-  ...(ownerState.variant && theme.typography[ownerState.variant]),
+  ...(ownerState.variant === 'inherit' && {
+    // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
+    font: 'inherit',
+  }),
+  ...(ownerState.variant !== 'inherit' && theme.typography[ownerState.variant]),
   ...(ownerState.align !== 'inherit' && {
     textAlign: ownerState.align,
   }),

diff --git a/packages/mui-material/src/styles/createTypography.js b/packages/mui-material/src/styles/createTypography.js
@@ -72,6 +72,7 @@ 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),
+    // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
     inherit: {
       fontFamily: 'inherit',
       fontWeight: 'inherit',

diff --git a/packages/mui-material/src/styles/createTypography.test.js b/packages/mui-material/src/styles/createTypography.test.js
@@ -74,6 +74,7 @@ describe('createTypography', () => {
     );
   });
 
+  // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
   it('should apply font CSS properties to inherit variant', () => {
     const typography = createTypography(palette, {});
     const fontProperties = ['fontFamily', 'fontWeight', 'fontSize', 'lineHeight', 'letterSpacing'];

diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js
@@ -38,6 +38,7 @@ export function unstable_createStyleFunctionSx() {
       return null;
     }
 
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
       return { [prop]: val };
     }