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

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

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

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

React.js

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

Q&A

解決済

1回答

5509閲覧

material-uiでiconが表示されない

IsseiMorita

総合スコア23

Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

React.js

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

1グッド

0クリップ

投稿2016/09/03 14:41

###前提・実現したいこと
cloud9でreactとmaterial-uiを使いながら開発をしています。
しかし、AppBarの右側にiconが出ていませんでした。
iconを出すにはどうすればいいですか?
###該当のソースコード

↓app.js

app.js

1import React from 'react'; 2import AppBar from 'material-ui/AppBar'; 3import IconButton from 'material-ui/IconButton'; 4 5const AppBarExample = () => ( 6 <AppBar 7 title="Title" 8 iconClassNameRight="muidocs-icon-navigation-expand-more" 9 /> 10); 11 12export default AppBarExample;

↓ index.js

javascipt

1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 4import AppBarExample from './components/app'; 5 6const App = () => ( 7 <MuiThemeProvider> 8 <AppBarExample /> 9 </MuiThemeProvider> 10); 11 12ReactDOM.render( 13 <App />, 14 document.getElementById('app') 15);

###補足情報(言語/FW/ツール等のバージョンなど)
cloud9, react ,material-ui

mit0223👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

私も material-ui 始めたばかりですが、同じようにつまずいてました。

iconClassNameRight="muidocs-icon-navigation-expand-more"

このアイコンクラス名は material-ui のマニュアルに出てたサンプルだと思うのですが、このアイコンは npm で material-ui をインストールしても入らないようです。
参考:Icon not showing up #2526

そこで、私は、元のgithubからマニュアルに使われている CSS (docs/src/www/css)をディレクトリごとダウンロードして利用するようにしました。プロジェクトのフォルダ構成が私と同じかどうかがわかりませんが、

src/www/css に github からダウンロードした CSS (docs/src/www/css) を置き、
src/www/index.html の中でもともと隣の main.css を指定していたところを変更して css/main.css を指定しました。

<link rel="stylesheet" type="text/css" href="css/main.css">

これで、AppBarの右端に白い v が表示されました。

投稿2016/09/14 23:17

mit0223

総合スコア3401

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

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

IsseiMorita

2016/09/18 06:36

回答ありがとうございます。直りました。
mit0223

2016/09/18 07:34

IsseiMorita さん、ベストアンサーありがとうございました。React が使える UI フレームワークを物色されているかと思いますが、何にするか決まりましたでしょうか?material-ui は自由度が低くて辛いなぁと感じております。semantic-ui は React との結合が開発途上ですよね。Rebass, grommet とかよさそうですが、一つ一つ検証するのは大変で・・・ 参考:http://qiita.com/kyrieleison/items/39ce30dd2d204791a9ea 逆質問で恐縮ですが、何か情報をお持ちでしたら教えてください。
IsseiMorita

2016/09/18 08:18

自分もフレームワークをどうするか検討しているところですが、とりあえずのところはmaterial-uiにしようと思っています。reactのui-frameworkはまだまだ発展しそうではあるので、今後どうなるかによって、また考えればいいかなと思っています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問