0

Reactjsのmaterial-uiでAppBarの右側にアイコンを置きました。しかし、現れるはずのアイコンが出てきません。
どのようにすれば表示されるのでようか。

import React, { Component } from 'react';
import { Link } from 'react-router';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';


export class Root extends Component{
  static propTypes = {
    children: React.PropTypes.any
  };

  static childContextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
  };

  constructor(props){
    super(props);
    this.state = {
      open: false
    };
  }

  getStyles(){
    const styles = {
      appBar: {
        display: 'flex'
      }
    };
    return styles;
  }

  getChildContext(){
    return {muiTheme: getMuiTheme()};
  }

  leftButtonTouched = () => this.setState({open: !this.state.open});

  rightButtonTouched = () => {

  }

  menuItemTouched = (e) => {
    this.setState({open: !this.state.open});
  }

  render(){
    const styles = this.getStyles();
    return (
      <div>
        <AppBar
          onLeftIconButtonTouchTap={this.leftButtonTouched}
          onRightIconButtonTouchTap={this.rightButtonTouched}
          // ここで指定できているはず。
          iconClassNameRight="muidocs-icon-action-home"
          style={styles.appBar}/>
        <Drawer
          open={this.state.open}
          docked={false}
          width={200}
          onRequestChange={open => this.setState({open})}>
        </Drawer>
        {this.props.children}
      </div>
    );
  }
}

リンクは存在してる状況でアイコンだけが表示されないようです。
特にエラーは出ていません。

2 件の回答 2

0

css の定義などが必要だと思います。

https://github.com/callemall/material-ui/issues/2526#issuecomment-164931347

この辺りの対応をすれば、表示されるんじゃないかと。

これらの定義が面倒な場合は、

https://github.com/andreypopp/react-fa

こっちをつかっても、気軽に fontIcon を表示できると思います。

0

iconElementRightを使いました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。