Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The application should compile without error

Current Behavior

When passing a component to the withStyles function I get this error

TS2345: Argument of type 'typeof ApplicationMenu' is not assignable to parameter of type 'ComponentType<AppMenuProps & WithStyles<"root" | "flex" | "menuButton" | "appBar" | "loginButton">>'.
Type 'typeof ApplicationMenu' is not assignable to type 'StatelessComponent<AppMenuProps & WithStyles<"root" | "flex" | "menuButton" | "appBar" | "loginBu...'.
Type 'typeof ApplicationMenu' provides no match for the signature '(props: AppMenuProps & WithStyles<"root" | "flex" | "menuButton" | "appBar" | "loginButton"> & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

Steps to Reproduce (for bugs)

export interface AppMenuProps {
classes: Record<string, string | undefined>
}

const styles = (theme : Theme) => ({
root: {
width: '100%',
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},

appBar: {
background: theme.palette.common.black,
color: theme.palette.common.white,
},

loginButton: {
color: theme.palette.common.white
}
});

class ApplicationMenu extends Component<AppMenuProps, {}> {

render() {
const {classes} = this.props;
return (
<div className={classes.root}>
<AppBar position="static" classes={{root: classes.appBar}}>
<Toolbar>
<IconButton className={classes.menuButton} color="primary" aria-label="Menu">
<MenuIcon/>
</IconButton>
<Typography type="title" color="inherit" className={classes.flex}>
Supportworks Dashboard
</Typography>
<Button classes={{root: classes.loginButton}}>Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
}

export default withStyles(styles)(ApplicationMenu) // Error Here

Context

Your Environment

Tech
Version

Material-UI
1.0.0-beta.22

React
^16.1.1

browser
NA

etc
Typescript 2.6.2

Issue 2:
This issue applies to the v1-beta branch. The typescript type definitions of StyleRules and Theme are not compatible and cause a typescript type conflict.

As an example consider the following typical case:

import { withStyles, Theme, StyleRulesCallback } from 'material-ui/styles';

const styles: StyleRulesCallback = (theme: Theme) => ({
root: theme.typography.button,
});

const Component = (props: any) => <p className={props.classes.root}>Test</p>;

export default withStyles(styles)(Component);

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The constant styles should correctly type check.

Current Behavior

The constant styles does not type check correctly. The problem is an incompatibility between the types StyleRules (defined in src/styles/withStyles.d.ts) and Theme (defined in src/styles/createMuiTheme.d.ts):

the object {root: theme.typography.button} is supposed to be of type StyleRule (because styles is declared to be StyleRulesCallback as expected by the call to withStyles)

the entry fontWeight in a StyleRule object is defined to be as defined in React.CSSProperties, i.e., "initial" | "inherit" | "unset" | "normal" | "bold" | "bolder" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

theme.typography.button is of type TypographyStyle, whose fontWeight property is of type number | string

Steps to Reproduce (for bugs)

Just take the code above and typecheck with TypeScript.

Your Environment

Tech
Version

Material-UI
v1-beta

React
15.6