0%

ReactにMaterial UIをそのまま使ったら怒られた

経緯

Reactを職場で使うことになったので勉強がてらぽとふぉでも作るか~ってなってセンスもないからCSSフレームワークを頂戴することにした。

症状と対策

Material UIの公式からコードを頂戴してそのまま貼ったらエラーが発生。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
import SwipeableViews from 'react-swipeable-views';

const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
slide: {
padding: 10,
},
};

export default class TabsExampleSwipeable extends React.Component {

constructor(props) {
super(props);
this.state = {
slideIndex: 0,
};
}

handleChange = (value) => {
this.setState({
slideIndex: value,
});
};

render() {
return (
<div>
<Tabs
onChange={this.handleChange}
value={this.state.slideIndex}
>
<Tab label="Tab One" value={0} />
<Tab label="Tab Two" value={1} />
<Tab label="Tab Three" value={2} />
</Tabs>
<SwipeableViews
index={this.state.slideIndex}
onChangeIndex={this.handleChange}
>
<div>
<h2 style={styles.headline}>Tabs with slide effect</h2>
Swipe to see the next slide.<br />
</div>
<div style={styles.slide}>
slide n°2
</div>
<div style={styles.slide}>
slide n°3
</div>
</SwipeableViews>
</div>
);
}
}

$ npm start
$ TypeError: Cannot read property 'prepareStyles' of undefined

prepareStylesなるものが未定義らしい。
調べたところMuiThemeProviderなるものがいるみたいで。
なので以下のようにコメントアウト下を変更。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
// From https://github.com/oliviertassinari/react-swipeable-views
import SwipeableViews from 'react-swipeable-views';
<!-追加-->
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
slide: {
padding: 10,
},
};

export default class TabsExampleSwipeable extends React.Component {

constructor(props) {
super(props);
this.state = {
slideIndex: 0,
};
}

handleChange = (value) => {
this.setState({
slideIndex: value,
});
};

render() {
return (
<!-追加-->
<MuiThemeProvider>
<div>
<Tabs
onChange={this.handleChange}
value={this.state.slideIndex}
>
<Tab label="Tab One" value={0} />
<Tab label="Tab Two" value={1} />
<Tab label="Tab Three" value={2} />
</Tabs>
<SwipeableViews
index={this.state.slideIndex}
onChangeIndex={this.handleChange}
>
<div>
<h2 style={styles.headline}>Tabs with slide effect</h2>
Swipe to see the next slide.<br />
</div>
<div style={styles.slide}>
slide n°2
</div>
<div style={styles.slide}>
slide n°3
</div>
</SwipeableViews>
</div>
<!-追加-->
</MuiThemeProvider>
);
}
}

エラー出ずにちゃんと動いた。

参考サイト:https://qiita.com/sho7/items/6bd2aec44b95cb3a7fed