質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1560閲覧

React Material-UIでのBottom Navigationで選択したときの色を変える

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/04/27 10:26

前提・実現したいこと

React Material-UIでのBottom Navigationで
アイコンを選択したときのでデフォルトの色を変えたいです。

イメージ説明

この青色の部分(アイコンを選択したとき)を違う色に変える方法をご教示おねがいします。
React初心者でなので、どうか宜しくおねがいします。

該当のソースコード

import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import BottomNavigation from '@material-ui/core/BottomNavigation'; import BottomNavigationAction from '@material-ui/core/BottomNavigationAction'; import Icon from '@material-ui/core/Icon'; import RestoreIcon from '@material-ui/icons/Restore'; import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon from '@material-ui/icons/LocationOn'; const styles = { root: { width: 500, }, }; class LabelBottomNavigation extends React.Component { state = { value: 'recents', }; handleChange = (event, value) => { this.setState({ value }); }; render() { const { classes } = this.props; const { value } = this.state; return ( <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}> <BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} /> <BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} /> <BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} /> <BottomNavigationAction label="Folder" value="folder" icon={<Icon>folder</Icon>} /> </BottomNavigation> ); } } LabelBottomNavigation.propTypes = { classes: PropTypes.object.isRequired, }; export default withStyles(styles)(LabelBottomNavigation);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

Mui のテーマをカスタマイズすればよいかと思います。

説明の便宜上、ご質問に挙げられている LabelBottomNavigation が、以下のような Appindex.js を通じてマウントされるものとします。

App

JSX

1import React from 'react'; 2import LabelBottomNavigation from './LabelBottomNavigation'; 3 4function App() { 5 return ( 6 <div className="App"> 7 <LabelBottomNavigation /> 8 </div> 9 ); 10} 11 12export default App;

index.js

JSX

1mport React from 'react'; 2import ReactDOM from 'react-dom'; 3import App from './App'; 4 5ReactDOM.render( 6 <App />, 7 document.getElementById('root') 8);

上記のままだと、各アイコンを選択したときに、ご質問の冒頭にあるようなデフォルトの色で表示されますが、これを例えば濃いピンク色 (#ff1493) に変更するには、index.js に以下のようなテーマ設定のコードを追加します。

index.js (修正後)

JSX

1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import App from './App'; 4 5import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; 6 7const theme = createMuiTheme({ 8 palette: { 9 primary: { 10 main: '#ff1493', 11 }, 12 } 13}); 14 15ReactDOM.render( 16 <MuiThemeProvider theme={theme}> 17 <App /> 18 </MuiThemeProvider>, 19 document.getElementById('root') 20);

上記の変更を試すための簡単なReactアプリを作り、以下に push しましたので、clone して動作確認してみてください。

以下のように表示されると思います。

イメージ説明

「HELLO WORLD」と表示されているボタンは、 index.js でのテーマ変更が Buttonにも反映されることを確認するために、このコミットで追加したものです。

なお、上記のようなコードによる指定は、ドキュメントのテーマの章 の中にある、palette をカスタマイズする指定の中の
"Providing the colors directly"
というセクションに書かれている方法ですが、テーマの色変更の指定方法は他にもありますので、上記のドキュメントにざっと目を通しておくとよいでしょう。

以上、参考になれば幸いです。

投稿2019/04/28 06:34

編集2019/04/28 13:03
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/04/28 06:49

ご丁寧な回答ありがとうございます 大変参考になりました
jun68ykt

2019/04/28 06:51

どういたしまして。解決されたようでよかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問