Examples of TypeScript with React, Redux and Material UI

types1.tsx

import * as React from "react";

interface OwnProps {
  myProp:string;
}

const MyButton: React.FC<OwnProps> = (props) => {
  return (<button />);
}

export default MyButton as React.ComponentType<OwnProps>;

types2.tsx

import Button, { ButtonProps } from "@material-ui/core/Button";
import * as React from "react";

interface OwnProps {
  buttonText:string;
}
type Props = OwnProps & ButtonProps;

const MyButton: React.FC<Props> = ({buttonText, ...rest}) => {
  return (<Button {...rest}>{buttonText}</Button>);
};

export default MyButton as React.ComponentType<Props>;

types3.tsx

import {   createStyles, Theme, withStyles } from "@material-ui/core";
import * as React from "react";
import { WithStyles } from "@material-ui/core";
import { StyleRules } from "@material-ui/core/styles";
import Button, { ButtonProps } from "@material-ui/core/Button";

const styles: (theme: Theme) => StyleRules<string> = theme =>
  createStyles({
    root: {
      margin: theme.spacing.unit
    }
  });

interface OwnProps {
  buttonText:string;
}
type PublicProps = OwnProps & ButtonProps;
type Props = PublicProps & WithStyles<typeof styles>;

const MyButton: React.FC<Props> = ({classes, buttonText, ...rest}) => {
  return (
    <Button {...rest} className={classes.root}>
      {buttonText}
    </Button>);
};

export default withStyles(styles)(MyButton) as React.ComponentType<PublicProps>;

types4.tsx

import Button, { ButtonProps } from "@material-ui/core/Button";
import * as React from "react";
import { Action, compose } from "redux";
import { Theme, WithStyles, withStyles, WithTheme } from "@material-ui/core";
import { connect } from "react-redux";
import { ThunkDispatch } from "redux-thunk";
import createStyles from "@material-ui/core/styles/createStyles";
import { StyleRules } from "@material-ui/core/styles";

const styles: (theme: Theme) => StyleRules<string> = theme =>
  createStyles({
    root: {
      margin: theme.spacing.unit
    }
  });

interface StateProps {
  buttonText:string
}
interface DispatchProps {
  dispatch: ThunkDispatch<IAppState, undefined, Action>;
}
interface OwnProps {}
type PublicProps = OwnProps & ButtonProps;
type Props = PublicProps & DispatchProps & StateProps & WithTheme & WithStyles<typeof styles>;


const MyButton: React.FC<Props> = ({classes, buttonText, ...rest}) => {
  return (
    <Button {...rest} className={classes.root}>
      {buttonText}
    </Button>);
};


const mapStateToProps = (state: IAppState): StateProps => {
  return {
    buttonText: state.buttonText
  };
};

export default compose(
  withStyles(styles, { withTheme: true }),
  connect<StateProps, DispatchProps, OwnProps, IAppState>(mapStateToProps)
)(MyButton) as React.ComponentType<PublicProps>;