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

Question

前提・実現したいこと

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);

Answer 1

こんにちは。

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

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

App

import React from 'react';
import LabelBottomNavigation from './LabelBottomNavigation';

function App() {
  return (
    <div className="App">
      <LabelBottomNavigation />
    </div>
  );
}

export default App;

index.js

mport React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

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

index.js (修正後)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff1493',
    },
  }
});

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

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

• 動作確認用サンプル: https://github.com/jun68ykt/q186725

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

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

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

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

Comments

[退会済みユーザー]

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

[jun68ykt]

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