Components

import { createStyles, Theme, withStyles } from '@material-ui/core';
import React from 'react';
export interface MyAwesomeProps {
  children: ReactElement | ReactElement[];
  classes?: {
    root?: string;
    ...
  };
  ...
}
const styles = (theme: Theme) =>
  createStyles({
    root: {
      width: (props: MyAwesomeProps) => props.xxx ? 123 : 456,
      ...
    },
    ...
  });
// name starts with `Mui` to make class names deterministic
export const MyAwesome = withStyles(styles, { name: 'MuiIdeMyAwesome' })(
  ({
    children,
    classes,
    ...,
    ...props
  }: MyAwesomeProps) => {
    // bla bla bla
    return (
      <div className={classes.root} {...props}>
        ...
      </div>
    );
  },
);