React + Material-UIのアプリで選択されているサイドバーメニューの項目を目立たせてみた

若槻龍太

2020.08.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の若槻です。

今回は、前回の記事で作成したReact + Material-UIのアプリで、選択されているサイドバーメニューの項目を目立たせてみました。

やりたいこと

サイドバーメニューのうち今開いているページの項目を強調して目立たせたいです。例えば商品ページが開かれているならメニュー中の「商品ページ」項目にスタイルを適用したいです。スクリーンショット_2020-08-08_17_26_13.png

アウトプット

「トップページ」「商品ページ」それぞれ選択時に次のようにスタイルを適用するようにしました。

トップページを開いた時
商品ページを開いた時

やってみた

開いているページの項目の強調は、React Routerの<NavLink>というAPIを使えば実現可能です。

REACT ROUTER <NavLink> | REACT TRAINING

ページのナビゲーションに<Link>の代わりに<NavLink>を使用しactiveStype属性を定義することにより、現在のURLと一致する要素にスタイルを追加することができます。

現在は次のように<Link>を使用してナビゲーションを実装しています。

          <List>
            <Link to="/" className={classes.link}>
              <ListItem button>
                <ListItemIcon>
                  <HomeIcon />
                </ListItemIcon>
                <ListItemText primary="トップページ" />
              </ListItem>
            </Link>
            <Link to="/products" className={classes.link}>
              <ListItem button>
                <ListItemIcon>
                  <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="商品ページ" />
              </ListItem>
            </Link>
          </List>

<NavLink>はreact-router-domからインポートして使用します。

import { NavLink } from 'react-router-dom';

選択されたメニュー項目適用したいスタイルを定義します。ここでは文字色を青とし、下線を追加するようにしています。

  const current = {
    color: 'blue',
    textDecoration: 'underline',
  };

<Link>を<NavLink>に変更し、それぞれに属性としてexact、activeStyle={current}属性を追加します。

          <List>
            <NavLink exact to="/" className={classes.link} activeStyle={current}>
              <ListItem button>
                <ListItemIcon>
                  <HomeIcon />
                </ListItemIcon>
                <ListItemText primary="トップページ" />
              </ListItem>
            </NavLink>
            <NavLink exact to="/products" className={classes.link} activeStyle={current}>
              <ListItem button>
                <ListItemIcon>
                  <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="商品ページ" />
              </ListItem>
            </NavLink>
          </List>

開いているページのメニュー項目に定義したスタイルが適用されるようになりました。

注意点として、今回の/と/productsのようにURL同士でパス文字列を内包する場合は<NavLink>の中でexact属性を指定する必要があります。

指定しない場合は下記のように商品ページ（/products）を開くと、<NavLink>のto属性で/パスが含まれる「トップページ」と「商品ページ」の両方にスタイルが適用されてしまいます。

文字色にMaterial-UIのカラー定義を使用し、さらに背景色を適用したい場合は、以下のようにスタイルの定義を変更します。

  const current = {
    color: colors.blue[800],
    textDecoration: 'none',
    background: colors.grey[100],
    width: '100%',
    display: 'inline-block',
  };

適用されるスタイルを変更できました。