in Front End

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:


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.

Write a Comment

Comment

Webmentions

  • Card loans

    … [Trackback]

    […] Read More on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • sig sauer p365 price

    … [Trackback]

    […] Find More Information here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • bulgarian makarov for sale

    … [Trackback]

    […] Find More on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • dark0de market

    … [Trackback]

    […] Find More on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • dark0de link

    … [Trackback]

    […] Information on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • ถาดกระดาษ

    … [Trackback]

    […] Read More on to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • official statement

    … [Trackback]

    […] Find More on to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • buy-endocet-10mg-online,

    … [Trackback]

    […] Read More Info here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Electricity Plans

    … [Trackback]

    […] Read More on to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • eloboost

    … [Trackback]

    […] Find More here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Buy FIREARMS Online

    … [Trackback]

    […] Find More on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • elojob lol

    … [Trackback]

    […] Find More here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • cvv dumps sites

    … [Trackback]

    […] Here you will find 26690 additional Info on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Führerscheinfabrik erfahrungen

    … [Trackback]

    […] Find More to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Führerscheinfabrik bewertungen

    … [Trackback]

    […] Find More Information here to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • 메리트카지노

    … [Trackback]

    […] Here you can find 46971 additional Information on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • home design

    … [Trackback]

    […] Here you can find 10562 more Info to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • asap market

    … [Trackback]

    […] Info to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • dark0de market link

    … [Trackback]

    […] Find More to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • บาคาร่า sa

    … [Trackback]

    […] Read More on to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • white house market link

    … [Trackback]

    […] Read More to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • https://www.ridgelineroofers.com/

    … [Trackback]

    […] Information to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Auto Glass replacement marketing

    … [Trackback]

    […] Find More to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • kurumsal sunucu yapılandırma

    … [Trackback]

    […] Find More Information here to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • scooter rental in honolulu

    … [Trackback]

    […] Information to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • 슬롯머신

    … [Trackback]

    […] There you can find 48367 more Information on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Supercritical CO2 Extraction Machine

    … [Trackback]

    […] Information to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • คา สิ โน ออนไลน์ ไม่มี ขั้น ต่ำ

    … [Trackback]

    […] Read More to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Sveriges pass

    … [Trackback]

    […] Find More to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • สโบเบ็ต

    … [Trackback]

    […] Read More Info here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Supercritical CO2 Extraction Machine

    … [Trackback]

    […] Find More here to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • microsoft exchange online plan 3

    … [Trackback]

    […] Read More here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • most expensive champagne

    … [Trackback]

    […] Find More to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • sunucu teknik destek

    … [Trackback]

    […] Information to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Server Teknik Destek

    … [Trackback]

    […] Info to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Mehr zu CBD Blüten von Frankys

    … [Trackback]

    […] Here you will find 99623 additional Info on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • world market url

    … [Trackback]

    […] There you can find 265 more Info to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • exchange bulut mail

    … [Trackback]

    […] Info on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • dell sunucu destek

    … [Trackback]

    […] There you can find 12122 more Info to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • hp sunucu servis

    … [Trackback]

    […] Read More Info here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • Server Teknik Servis

    … [Trackback]

    […] Here you can find 67038 more Information on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • bilişim danışmanlık hizmeti

    … [Trackback]

    […] Read More Info here to that Topic: charlee.li/typing-react-2-material-ui/ […]

  • keycaps for keyboard

    … [Trackback]

    […] Read More Information here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • cvv bins

    … [Trackback]

    […] Find More on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • microsoft exchange mail

    … [Trackback]

    […] Find More Info here on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • sbo

    … [Trackback]

    […] Find More on on that Topic: charlee.li/typing-react-2-material-ui/ […]

  • seo services usa chicago

    seo services usa chicago

    orrxcxvke xemdg dqrtfik zmph chlkewfrwkyowwm