カテゴリー: React

インストール

$ yarn add @material-ui/core
$ yarn add @material-ui/icons

全体のテーマを整える

src/assets/theme.ts

import indigo from "@material-ui/core/colors/indigo";
import pink from "@material-ui/core/colors/pink";
import red from "@material-ui/core/colors/red";
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    primary: pink,
    secondary: indigo
  }
});

export default theme;

上書きできる設定は これ 。

src/index.tsx

import { MuiThemeProvider } from "@material-ui/core";
import theme from "./assets/theme";

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById("root")
);

使ってみる

import Button from "@material-ui/core/Button";
import AccessAlarmIcon from "@material-ui/icons/AccessAlarm";
・・・
  <Button variant="contained" color="primary">
    <AccessAlarmIcon />
    Hello
  </Button>
・・・

color="primary"と指定して、青かったボタンが、

ピンクに表示される。