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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

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

Q&A

0回答

1378閲覧

reactのmaterial-uiを利用しようとすると画面が真っ白になる。

MTTK

総合スコア38

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

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

0グッド

0クリップ

投稿2019/08/27 02:36

編集2019/08/27 02:42

#質問内容
React.jsにmaterial-uiを組み込もうとした所、
真っ白になってしまいます。
アプリケーションの起動自体は行われている様なのですが、
原因の追究が行えず、質問をさせて頂きました。

追記した箇所をコメント化すると画面は正常に表示されます。

https://teratail.com/questions/159019 と現象が似ているかとは思うのですが、
回答と同様の事も対応のしようがなく、困っております。

#以下、該当のソースコードとなります。

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

class NavBar extends Component {
render() {
return (
<MuiThemeProvider>
<div>
<Drawer
docked={false}
width={200}
open={this.props.open}
onRequestChange={() => this.props.onToggle()}
>
<MenuItem>React</MenuItem>
<MenuItem>Redux</MenuItem>
<MenuItem>React Router</MenuItem>
<MenuItem>Material UI</MenuItem>
<MenuItem>Electron</MenuItem>
</Drawer>
<AppBar
title="React Study"
onLeftIconButtonTouchTap={ () => this.props.onToggle()}
/>
</div>
</MuiThemeProvider>
);
}
}

export default NavBar;

#追記
<MuiThemeProvider> から </MuiThemeProvider>をコメント化すると
プリケーションが画面上に表示されます。
情報として足りていない部分もあるとは思いますが、
ご意見を宜しくお願い致します。

#バージョン情報
React 15.6.2
matearial-ui 0.20.2

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問