Material-ui: [TS] From @types/react 16.3.9 React.CSSProperties is strongly typed

[xaviergonz]

From types/react 16.3.9 react now uses csstypes as a package for CSSProperties, which is strongly typed
This means that types for themes that used to rely on the fallback [k: string]: any for stuff such as "&:hover" gives now errors.

For those cases it should use something like

type ExtendedCSSProperties = React.CSSProperties & {
  [k: string]: any
}

[xaviergonz]

Actually to get even better typing something as lame as this (typescript cannot make circular types :( ) would be preferred

type ExtendedCSSProperties = React.CSSProperties & {
  [k: string]: React.CSSProperties & {
    [k: string]: React.CSSProperties & {
      [k: string]: React.CSSProperties & {
        [k: string]: React.CSSProperties & {
          [k: string]: React.CSSProperties & {
            [k: string]: React.CSSProperties & {
              [k: string]: React.CSSProperties & {
                [k: string]: React.CSSProperties & {
                  [k: string]: React.CSSProperties & {
                    [k: string]: any
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

that way you get strong typing for standard properties up to 10 levels deep, further than that anything goes

[pelotom]

Where exactly in Material UI are you proposing a change, or is this an issue with @types/jss? Is it a duplicate of https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24862?

[rosskevin]

As noted here: https://github.com/frenic/csstype#what-should-i-to-do-when-i-get-type-errors

I am now using the following type augmentation css.d.ts - though I'm not sure what the best path is going forward:

import * as CSS from 'csstype'

declare module 'csstype' {
  interface Properties {
    // Add a CSS Custom Property
    '&:hover'?: Properties<string | number>

    // ...or allow any other property
    // [index: string]: any
  }
}

For one-offs where I use jss syntax, I'm casting as any (mentioned by @pelotom in https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24911):

const styles = withStyles<FooClassKey>(theme => ({
  listItem: {
    ['&:hover $listItemIcon' as any]: {
      visibility: 'inherit',
    },
  },
}))

[pelotom]

Module augmentation/casting definitely shouldn't be required for this. This is a bug in either @types/jss or material-ui's typings. Looking into it.

[pelotom]

I've opened a PR: #11007.