【React】Material-UIで導入したコンポーネントのカラー変更方法
Material-UIの色
Material-UIでボタンやアプリバーなどを手軽に導入できますが、そのまま導入するとデフォルトの色で配置されます。
アプリによってはデフォルトとは違う色合いでコンポーネントを使いたい場合があると思います。
今回はデフォルトから指定の色に、コンポーネントの色を変更する方法について書いていきます。
実装方法
いきなりですが実装方法です。
今回はアプリバーの「基本的な検索フィールド付きApp Bar」を使用します
デフォルトは下記画像になります。
基本的に青色を基調とし、数字は赤色になっています。
このコンポーネントのコードに、そのままコンポーネントのcolorをredにしてもコンポーネントの色は変わりません。
コンポーネントの色を変えるには、
1.createMuiThemeを定義して、色を定義する
2.上記で定義したcreateMuiThemeをthemeとして親要素の引数で渡す
上記2点をする必要があります。
下記のようになります。
import React from 'react';
import PrimarySearchAppBar from "./component/MaterialUIHead";
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
//primaryとsecondaryで、色を指定します
const myTheme = createMuiTheme({
palette: {
primary: {
main: "#9c27b0",
},
secondary: {
main: "#76ff03",
},
},
});
function App() {
return (
//PrimarySearchAppBarの親要素にThemeProviderを配置し、themeに上記で定義したmyThemeを渡します
<ThemeProvider theme={myTheme}>
<PrimarySearchAppBar></PrimarySearchAppBar>
</ThemeProvider>
);
}
export default App;
上記コードを適用すると、下記のようになります。
今回はPrimaryに紫、secondaryに黄緑色を指定しました。
色について
ちなみに、任意の色の16進数を下記で定義できます。
Material-UI Playground
https://material-ui.com/ja/customization/color/#playground
参考
Material-UI コンポーネント内のテーマへのアクセス
https://material-ui.com/customization/theming/#accessing-the-theme-in-a-component
Material-UI基本的な検索フィールド付きApp Bar
https://material-ui.com/ja/components/app-bar/#app-bar-with-a-primary-search-field
Material-UI Playground
https://material-ui.com/ja/customization/color/#playground
Author And Source
この問題について(【React】Material-UIで導入したコンポーネントのカラー変更方法), 我々は、より多くの情報をここで見つけました https://qiita.com/GalaxyNeko/items/7ff709710d8f0822911b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .