スタイル

makeStylesを使います。これは戻り値で高頻度でuseStylesという名前で束縛される React フックを返します。

import { makeStyles } from '@material-ui/core/styles';

makeStylesへ CSS Object を渡すことでスタイルを定義できます。戻り値は React Hook となっています。

const useStyles = makeStyles({
  root: {
    backgroundColor: "red",
    color: props => props.color
  }
});

TypeScript の場合は、makeStyles<Theme, StylesProps>とすることでpropsの型が効くようになり便利です。

あとはこと React Hook を React Component 内部で使い classes という {key: selector} のようなオブジェクトを取り出して使うだけです。

const Foo = props => {
  const classes = useStyles(props);

  return <Tab classes={classes} />;
};

このclassesは上記の<Tab>のようなある程度決められたキーを持つオブジェクトである必要があります。でなれけば以下のようなエラーがコンソールに表示されます。

mergeClasses.js:26 Material-UI: the key `icon` provided to the classes prop is not implemented in ForwardRef(Radio).
You can only override one of the following: root,checked,disabled,colorPrimary,colorSecondary.