Material-UIのテーマカラーを変える

React


Page content

Material-UI

Material-UIは、material designを踏襲したReactのUIライブラリ。

フラットデザインに陰影などを持たせた、モダンなUIコンテンツを作ることができます。

Material-UIでは、コンテンツにprimary, secondaryといったテーマカラーを使うことができる。

デフォルトだとprimaryがindigo(紫)、secondaryがpink。

Material-UIのテーマカラーを変える

createMuiThemeとMuiThemeProviderを使って変える。

@material-ui/core/colorsから色をimportして使うと、簡単に色を変えることができる。

import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
import red from '@material-ui/core/colors/red';

export const theme = createMuiTheme({
  palette: {
    type: 'light',
    primary: blue,
    secondary: red
  },
});

MuiThemeProviderに作成したthemeを設定し、themeを反映させたいコンテンツを囲う。

import React from 'react';
import './App.css';
import MainContents from './components/MainContents';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import { theme } from "./theme";

function App() {
  return (
    <MuiThemeProvider theme={theme}>
    <div className="App">
        <MainContents />
    </div>
    </MuiThemeProvider>
  );
}

export default App;

themeが反映される。

もっと詳細に変える

詳細に色を指定してテーマを変えることもできる。

色を選ぶ際は以下のColor Toolを使うとよいかと思います。

  • Color Tool - Material Design

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

export const theme = createMuiTheme({
palette: {
primary: {
  light: '#757ce8',
  main: '#3f50b5',
  dark: '#002884',
  contrastText: '#fff',
},
secondary: {
  light: '#ff7961',
  main: '#f44336',
  dark: '#ba000d',
  contrastText: '#000',
},
},
});
React開発 現場の教科書
Amazonで調べる
楽天市場で調べる
Yahooショッピングで調べる
7netで調べる