[typescript] createStyles is incompatible with top level @media queries

[dsenkus]

Typescript compiler fails when using @media queries as top level keys in styles.

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Ideally @media queries should be allowed as top level keys in styles.

Current Behavior

Typescript error:

@media (min-width:...' is not assignable to parameter of type 'Record<string, CSSProperties>'

Full error message:

(4,47): Argument of type '{ root: { minHeight: string; }; content: { minHeight: string; }; sidebar: {}; '@media (min-width:...' is not assignable to parameter of type 'Record<string, CSSProperties>'.
  Property ''@media (min-width: 960px)'' is incompatible with index signature.
    Type '{ root: { display: string; }; content: { flexGrow: number; }; sidebar: { width: string; }; }' is not assignable to type 'CSSProperties'.
      Types of property 'content' are incompatible.
        Type '{ flexGrow: number; }' is not assignable to type 'string | undefined'.
          Type '{ flexGrow: number; }' is not assignable to type 'string'.
g

Steps to Reproduce

import * as React from 'react';
import { createStyles, WithStyles, withStyles, Theme } from '@material-ui/core';

const styles = (theme: Theme) => createStyles({
  root: {
    minHeight: '100vh',
  },
  content: {
    minHeight: '100vh',
  },
  sidebar: {
  },
  '@media (min-width: 960px)': {
    root: {
      display: 'flex',
    },
    content: {
      flexGrow: 1,
    },
    sidebar: {
      width: '250px',
    },
  }
});

interface Props extends WithStyles<typeof styles> {
}

const TestComponent: React.SFC<Props> = () => (<p>It Works!</p>);

export default withStyles(styles)(TestComponent);

Context

Although having @media queries embedded within classes works, but it would be great to have them as top level style elements:

// this works
const styles = (theme: Theme) => createStyles({
  root: {
    minHeight: '100vh',
    '@media (min-width: 960px)': {
      display: 'flex',
    }
  }
})

// however this would be really useful:
const styles = (theme: Theme) => createStyles({
  root: {
    minHeight: '100vh'
  },
  '@media (min-width: 960px)': {
    root: {
      display: 'flex',
    },
  }
})

Your Environment

Tech	Version
Material-UI	v1.4.1
React	v16.41
tsc	v2.9.2

[eps1lon]

createStyles allows top level media queries as of #11007. The problem here is that typescript thinks content is the css property content and not a className. Resolving this via definitions might be impossible. Your best bet is to use only classnames that don't conflict with existing CSS properties.

I'm going to add a test to avoid regression and illustrate the issue. Might be good to add a note to the documentation.

[rosskevin]

tsc wasn't enabled in the ci build, this exact issue was just proven with #12783

[oliviertassinari]

It seems to be working now with TypeScript v3.1.1.

[merceyz]

The problem here is that typescript thinks content is the css property content and not a className. Resolving this via definitions might be impossible

@eps1lon It would be possible to let all CSS properties be set to a CSSProperties object, though that might not be something that's wanted.
Could be added here: https://github.com/mui-org/material-ui/pull/15546/files#diff-2420cff07893e7d10e918d0c2fffdc9bR14

Otherwise everything is working as expected and this issue can be closed

[eps1lon]

Closing as working as intended. See #12277 (comment) for explanation and workaround.