Theme overrides : width does not exist on type CSSProperties

Using createMuiTheme I override the MuiCard, setting a custom width and height, in this way.

const theme = createMuiTheme({
  palette: {
    type: 'light',
    primary: {
      main: primaryColor,
    },
    secondary: {
      main: secondaryColor,
    },
    fallback: {
      main: fallback,
    },
    fog: {
      main: fog,
    },
  },
  overrides: {
    MuiCard: {
      root: {
        width: 300,
        height: 276,
        margin: 15,
        [breakpoints.down('sm')]: {
          margin: 5,
        },
      },
    },
  },
  props: {
    MuiSkeleton: {
      animation: 'pulse',
    },
    MuiAvatar: {
      variant: 'rounded',
    },
  },
})

The component take the good dimensions. The problem comes when I try to access these values in the style of other components.

export const useStyle = makeStyles((theme: Theme) =>
  createStyles({
    cardSkeleton: {
      width: theme.overrides?.MuiCard?.root?.width ?? 300,
      height: theme.overrides?.MuiCard?.root?.height ?? 276,
      margin: 15,
      [theme.breakpoints.down('sm')]: {
        margin: 5,
      },
    },
  }),
)

I have this error for width and height : Property 'width' does not exist on type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'. Property 'width' does not exist on type 'PropsFunc<{}, CreateCSSProperties<{}>>'.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment 🌎

Tech	Version
Material-UI	v4.10.2
React	16.11.0
Browser	Chrome
TypeScript	3.8.3

Issue Analytics

State:
Created 3 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

ukriscommented, Jul 9, 2020

I’ve created a Github repo based on your code sandbox. https://github.com/ukris/material-ui-theme-overrides

master corresponds to material-UI - 4.9.11 and branches 4.11.0 and 5.0.0.alpha2 respectively.

for some reason in your case, all version works with the changes

There is one caveat: // @ts-ignore const root:CSSProperties = theme.overrides?.MuiCard?.root

if // @ts-ignore is unacceptable, then I guess u can do a conditional check, and return two different objects. or have theme: any as some solutions seemed to allude - which I think is not an acceptable solution. Below is conditional check without @ts-ignore

 const rt = theme.overrides?.MuiCard?.root
  if (!rt) {
    return createStyles({
      constainer: {
        position: 'relative',
        backgroundColor: theme.palette.fog.main,
      },
    })
  }
  const root =  rt as CSSProperties
  return createStyles({
    constainer: {
      position: 'relative',
      width: root?.width,
      height: root?.height, 
      margin : root?.margin,
      backgroundColor: theme.palette.fog.main,
    },
  })```

0reactions

RobelTeklecommented, Jul 7, 2020

Tried to downgrade to 4.9.10 I still have the error