refactor: extend Overrides for MuiSkeleton (#4818)

jsjoeio · web-flow · commit 17f5e830c7f8 · 2022-10-31T16:33:01.000-07:00
* refactor: extend Overrides for MuiSkeleton Looking at the types provided with `@material-ui/core`, it is indeed missing `MuiSkeleton`. I'm not sure why. I found this issues upstream: mui/material-ui#24959 I also tried upgrading the package to the latest - 4.12.4 I believe but that didn't fix it either. I resorted to extending the `Overrides` type based on what I saw in the most recent version of the declaration file. This is a temporary fix but opts back in to type safety instead of resorting to `@ts-ignore`. * formatting
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
@@ -1,9 +1,17 @@
-import { lighten, Theme } from "@material-ui/core/styles"
+import { lighten, Theme, StyleRules } from "@material-ui/core/styles"
 import { Overrides } from "@material-ui/core/styles/overrides"
+import { SkeletonClassKey } from "@material-ui/lab"
 import { colors } from "./colors"
 import { borderRadius, borderRadiusSm } from "./constants"
 
-export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
+type ExtendedOverrides = Overrides & {
+  MuiSkeleton: Partial<StyleRules<SkeletonClassKey>>
+}
+
+export const getOverrides = ({
+  palette,
+  breakpoints,
+}: Theme): ExtendedOverrides => {
   return {
     MuiCssBaseline: {
       "@global": {
@@ -190,8 +198,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         marginTop: 8,
       },
     },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- The Mui types don't accept the MuiSkeleton but it works. I tried to extends the Overrides interface with no success.
-    // @ts-ignore
     MuiSkeleton: {
       root: {
         backgroundColor: palette.divider,
