26832


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

[code]

    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>
        );
      }
    }
    
[/code]

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


CC BY-SA 3.0
2016-05-28T09:46:21.207
25242
2016-06-18T11:24:09.430
7232
question
javascript reactjs material-ui
material-uiでAppBarの右側にアイコンがでない


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

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

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

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

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

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


CC BY-SA 3.0
2016-06-02T04:47:28.460
25377
2016-06-02T04:47:28.460
15731
25242
answer


`iconElementRight`を使いました。


CC BY-SA 3.0
2016-06-18T11:24:09.430
26832
2016-06-18T11:24:09.430
7232
25242
answer