[WIP] Bug Fixed: createTypography TypographyOptions type is invalid (#…

…9364)

Make TypographyOptions = DeepPartial<Typography>

src/index.d.ts

@@ -48,6 +48,11 @@ type Diff<T extends string, U extends string> = (
 /** @internal */
 export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
 
+/** @internal */
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>;
+}
+
 export namespace PropTypes {
   type Alignment = 'inherit' | 'left' | 'center' | 'right' | 'justify';
   type Color = 'inherit' | 'primary' | 'accent' | 'default';

src/styles/createTypography.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Palette } from './createPalette';
+import { DeepPartial } from '..'
 
 export type TextStyle =
   | 'display1'
@@ -36,7 +37,7 @@ export interface TypographyStyle {
 
 export type Typography = { [type in Style]: TypographyStyle } & FontStyle;
 
-export type TypographyOptions = Partial<FontStyle> & Partial<Typography>;
+export type TypographyOptions = DeepPartial<Typography>;
 
 export default function createTypography(
   palette: Palette,

src/styles/createTypography.spec.js

@@ -34,4 +34,10 @@ describe('createTypography', () => {
     const typography = createTypography(palette, { htmlFontSize: 10 });
     assert.strictEqual(typography.display4.fontSize, '11.2rem');
   });
+
+  it('should create a typography with custom display4', () => {
+    const customFontSize = '18px';
+    const typography = createTypography(palette, { display4: { fontSize: customFontSize } });
+    assert.strictEqual(typography.display4.fontSize, customFontSize);
+  });
 });

test/typescript/styles.spec.tsx

@@ -94,6 +94,15 @@ const customTheme = createMuiTheme({
   },
 });
 
+const customThemeTypographyPartial = createMuiTheme({
+  typography: {
+    display4: {
+      fontSize: '18px'
+    },
+    fontSize: 18
+  },
+});
+
 function OverridesTheme() {
   return (
     <MuiThemeProvider theme={theme}>