타이프 라이터 재료 UI 베타 21 : 타이프 라이터 및 재료 UI를 사용하는 경우 유형 '문자열'

Question

withStyles에 문제가있는 것 노동 조합 유형에 할당 할 수없는

버전은,
typescript@2.6.1
material-ui@1.0.0-beta.21

장식 기능을 만들기 위해 StyleRulesCallback 매개 변수와 함께 withStyles을 사용하면 오류 TS2345가 발생합니다.

문제 : TS에 다시 결합 형
서랍 예에 스타일 클래스 키 문자열 값을 할당 할 수없는 - 재산의 [https://material-ui-next.com/demos/drawers/][1]

const decorator = withStyles(
     (theme) => { 
     return { 
      root: { 
      width: '100%', 
      height: 430, 
      marginTop: theme.spacing.unit * 3, 
      zIndex: 1, 
      overflow: 'hidden', 
      }, 
      appFrame: { 
      position: 'relative', 
      display: 'flex', 
      width: '100%', 
      height: '100%', 
      }, 
      appBar: { 
      position: 'absolute', 
      marginLeft: drawerWidth, 
      [theme.breakpoints.up('md')]: { 
       width: `calc(100% - ${drawerWidth}px)`, 
      }, 
      }, 
      ... 
     }; 
     }, 
     { withTheme: true } 
    ); 

TS2345 오류

유형 '오버플로'는 호환되지 않습니다. 'string'유형을 ''hidden ''유형에 할당 할 수 없습니다. "상속하다"| "초기"| "설정되지 않은"| "자동"| "스크롤"| "명백한"'. 캐스트 클래스 키 값

type overflowType = 'hidden' | 'inherit' | 'initial' | 'unset' | 'auto' | 'scroll' | 'visible' 
const decorator = withStyles(
    (theme) => { 
    return { 
     root: { 
     width: '100%', 
     height: 430, 
     marginTop: theme.spacing.unit * 3, 
     zIndex: 1, 
     overflow: 'hidden' as overflowType, 
     }, 

질문가 withStyles에서 string not assignable to union type입니다 :

문제의 해결 방법 1 :

type stylesType = 'root' | 'appFrame' | 'appBar' | 'navIconHide' | 'drawerHeader' | 'drawerPaper' | 'content'; 

const decorator = withStyles<stylesType>(...) 

그 끔찍한 해결 방법 2를 실행는 withStyles에 대한 일반적인 키 클래스를 제공 예상 결과? 나에게 그것은 버그처럼 보인다.

Answer 1

CSSProperties를 사용할 수 있습니다.

root: { 
    width: '100%', 
    height: 430, 
    marginTop: theme.spacing.unit * 3, 
    zIndex: 1, 
    overflow: 'hidden', 
} as React.CSSProperties