typescript + material ui + react

1. material UI + React의 createStyle과는 다른 문법을 사용한다.

import React from 'react';
import { withStyles, WithStyles, Theme, StyleRules } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const styles = (theme: Theme): StyleRules => ({ // 1
  typography: {
    width: 200,
    margin: theme.spacing(2)
  },
});
type HelloProps = WithStyles<typeof styles>; // 2


const Hello = ({classes}:HelloProps)=>{ // 3
  return(
    <Typography variant="h6" className={classes.typography}>
      Hello!
    </Typography>
  )
}

export default withStyles(styles)(Hello); // 4

찾아본 문법들을 정리한 결과 위와 비슷한 느낌의 문법이 된다.

1. StyleRules로 style을 정의한다.

2. 2 WithStyles로 style들의 type을 정의하는데 위와 같은 문법을 따라야한다
   (<typeof generic>)

3. React.FC type을 피하기 위해 위 처럼 input 값 자체에 type을 지정해준다.

4. export 할 때 style과 component를 묶어준다.

이런 느낌으로 만들어보면 될 것 같다.