From 17f5e830c7f8b8b95009939448c77962096d1fa6 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Mon, 31 Oct 2022 16:33:01 -0700 Subject: [PATCH] refactor: extend Overrides for MuiSkeleton (#4818) * 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: https://github.com/mui/material-ui/issues/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 --- site/src/theme/overrides.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts index 344d8dacc0..2cfb596270 100644 --- 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> +} + +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,