theme: fix font weight type issue

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
backstage · Aug 14, 2023 · ce958df · ce958df
1 parent 8b33a7c
commit ce958df
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 3 deletions.
diff --git a/.changeset/odd-students-mix.md b/.changeset/odd-students-mix.md
@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Workaround for style type inconsistencies within Material-UI v4 that could cause type errors when using font weights from the theme as styles.
diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx
@@ -176,8 +176,8 @@ function convertColumns<T extends object>(
       headerStyle.color = theme.palette.textContrast;
 
       if (typeof cellStyle === 'object') {
-        (cellStyle as React.CSSProperties).fontWeight =
-          theme.typography.fontWeightBold;
+        (cellStyle as React.CSSProperties).fontWeight = theme.typography
+          .fontWeightBold as React.CSSProperties['fontWeight'];
       } else {
         const cellStyleFn = cellStyle as (
           data: any,
@@ -186,7 +186,11 @@ function convertColumns<T extends object>(
         ) => React.CSSProperties;
         cellStyle = (data, rowData, rowColumn) => {
           const style = cellStyleFn(data, rowData, rowColumn);
-          return { ...style, fontWeight: theme.typography.fontWeightBold };
+          return {
+            ...style,
+            fontWeight: theme.typography
+              .fontWeightBold as React.CSSProperties['fontWeight'],
+          };
         };
       }
     }

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -38,6 +38,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": "^4.12.2",
+    "@material-ui/styles": "^4.11.0",
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
     "react-dom": "^16.13.1 || ^17.0.0"

diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts
@@ -22,6 +22,7 @@ import type {
   PaletteOptions as MuiPaletteOptions,
   Palette as MuiPalette,
 } from '@material-ui/core/styles/createPalette';
+import { CSSProperties } from '@material-ui/styles/withStyles';
 import {
   BackstagePaletteAdditions,
   BackstageThemeAdditions,
@@ -104,3 +105,28 @@ declare module '@material-ui/core/styles/createTheme' {
 
   interface ThemeOptions extends Partial<BackstageThemeAdditions> {}
 }
+
+// This fixes as type incompatibility that is caused by a variance in the declaration of
+// the font weight types in the MUI v4 theme typography and styles such as through `makeStyles()`.
+// The font weight in styles are defined to be `CSSProperties["fontWeight"]` from `csstype`, while the
+// front weight in the typography are defined to be `React.CSSProperties["fontWeight"]` from `@types/react`.
+//
+// This is usually not an issue, but with a bad combination of `csstype` version and the wrong Yarn workspace
+// hoisting, you can end up in a case where font weights from the theme are not assignable as styles.
+//
+// This makes sure that the font weights in the theme are compatible with the styles.
+declare module '@material-ui/core/styles/createTypography' {
+  interface Typography {
+    fontWeightLight: CSSProperties['fontWeight'];
+    fontWeightRegular: CSSProperties['fontWeight'];
+    fontWeightMedium: CSSProperties['fontWeight'];
+    fontWeightBold: CSSProperties['fontWeight'];
+  }
+
+  interface TypographyOptions {
+    fontWeightLight: CSSProperties['fontWeight'];
+    fontWeightRegular: CSSProperties['fontWeight'];
+    fontWeightMedium: CSSProperties['fontWeight'];
+    fontWeightBold: CSSProperties['fontWeight'];
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9622,6 +9622,7 @@ __metadata:
     "@types/react": ^16.13.1 || ^17.0.0
   peerDependencies:
     "@material-ui/core": ^4.12.2
+    "@material-ui/styles": ^4.11.0
     "@types/react": ^16.13.1 || ^17.0.0
     react: ^16.13.1 || ^17.0.0
     react-dom: ^16.13.1 || ^17.0.0