Typing React (2) – Material-UI

This series focus on how to correctly use TypeScript in React application. The previous article explained some details in typing React itself, so this article will focus on Material-UI, one of the most popular UI library.

Previous articles:

• Typing React (1) – Basic

---

Adding Material UI is as easy as npm install --save @material-ui/core. Generally speaking Material UI is well typed so there should be no problem using it in TypeScript. The only challenge is the CSS-in-JS. If you are using Material UI 3.x, probably you have to use the Higher Order Component way to integrate styles into your component:

// NOTE: This is for Material UI 3.x
import React from 'react';
import { Theme, createStyles, WithStyles, withStyles } from '@material-ui/core';

const styles = (theme: Theme) =>
  createStyles({
    root: {},
  });

export interface IProps extends WithStyles<typeof styles> {}

class Todo extends React.Component<IProps> {
  render() {
    const { classes } = props;
    return <div className={classes.root} />;
  }
};

export default withStyles(styles)(Todo);

This is perfect for class-style component, but might be a little weird for functional component. Fortunately Material UI team just released v4.0.0, which provides a new way using React hooks to inject styles. Let us see how it works:

// makeStyles only supported in Material UI 4+
import React from 'react';
import { Theme, makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    border: `1px solid ${theme.palette.divider}`,
    shadow: theme.shadows[1],
  }
}));

const Todo: React.FC = () => {
  const classes = useStyles();
  return <div className={classes.root} />;
};

export default Todo;

This is definitely easier and cleaner than the HOC approach, and most importantly, the default export remains as a type so that it is possible to define generic component with styles.