teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問reactjsのmaterial-uiでwithStyles使用時にpropsも渡したい

編集履歴

質問編集履歴

2

文法の修正

2018/11/13 02:07

投稿

TakakiKuwabara
TakakiKuwabara

スコア38

test CHANGED
File without changes
test CHANGED
@@ -11,3 +11,161 @@
11
11
  しかし、withStylesを使用する場合、このparamsが使用できないため、何か方法がないか試行錯誤しています。
12
12
 
13
13
  わかる方がいらっしゃれば、お願い致します。
14
+
15
+
16
+
17
+
18
+
19
+ ```ReactJS
20
+
21
+ // Sample.js
22
+
23
+ import { withStyles } from 'material-ui/styles';
24
+
25
+
26
+
27
+ const styles = {
28
+
29
+ root: {
30
+
31
+ background: 'red',
32
+
33
+ },
34
+
35
+ };
36
+
37
+
38
+
39
+ class MyComponent extends React.Component {
40
+
41
+ render () {
42
+
43
+ return <div className={this.props.classes.root} />;
44
+
45
+ }
46
+
47
+ }
48
+
49
+
50
+
51
+ export default withStyles(styles)(MyComponent);
52
+
53
+ ```
54
+
55
+
56
+
57
+
58
+
59
+
60
+
61
+ ```ReactJS
62
+
63
+ // MainContainer.js
64
+
65
+ import React, { Component, PropTypes } from 'react';
66
+
67
+ import { bindActionCreators } from 'redux';
68
+
69
+ import { connect } from 'react-redux';
70
+
71
+
72
+
73
+ // action
74
+
75
+ import * as MainAction from 'action/main_action.jsx';
76
+
77
+
78
+
79
+ // component
80
+
81
+ import Sample from 'component/sample.js';
82
+
83
+
84
+
85
+
86
+
87
+ class MainContainer extends Component {
88
+
89
+
90
+
91
+ constructor(props) {
92
+
93
+ super(props);
94
+
95
+ this.state = {}
96
+
97
+ }
98
+
99
+
100
+
101
+ componentWillMount(props) {}
102
+
103
+
104
+
105
+ render() {
106
+
107
+ const { reducers, actions } = this.props;
108
+
109
+ return (
110
+
111
+ <div>
112
+
113
+ <Sample params={{test : 123}} />
114
+
115
+ </div>
116
+
117
+ )
118
+
119
+ }
120
+
121
+ }
122
+
123
+
124
+
125
+
126
+
127
+ function mapStateToProps(state, ownProps) {
128
+
129
+ return {
130
+
131
+ reducers : Object.assign(
132
+
133
+ state.MessengerReducer,
134
+
135
+ ),
136
+
137
+ }
138
+
139
+ }
140
+
141
+
142
+
143
+ function mapDispatchToProps(dispatch) {
144
+
145
+ return {
146
+
147
+ actions : Object.assign(
148
+
149
+ bindActionCreators(MessengerAction, dispatch),
150
+
151
+ ),
152
+
153
+ }
154
+
155
+ }
156
+
157
+
158
+
159
+
160
+
161
+ export default connect(
162
+
163
+ mapStateToProps,
164
+
165
+ mapDispatchToProps
166
+
167
+ )(MessengerContainer)
168
+
169
+
170
+
171
+ ```

1

文法の修正

2018/11/13 02:07

投稿

TakakiKuwabara
TakakiKuwabara

スコア38

test CHANGED
File without changes
test CHANGED
@@ -11,159 +11,3 @@
11
11
  しかし、withStylesを使用する場合、このparamsが使用できないため、何か方法がないか試行錯誤しています。
12
12
 
13
13
  わかる方がいらっしゃれば、お願い致します。
14
-
15
-
16
-
17
- ```ReactJS
18
-
19
- // Sample.js
20
-
21
- import { withStyles } from 'material-ui/styles';
22
-
23
-
24
-
25
- const styles = {
26
-
27
- root: {
28
-
29
- background: 'red',
30
-
31
- },
32
-
33
- };
34
-
35
-
36
-
37
- class MyComponent extends React.Component {
38
-
39
- render () {
40
-
41
- return <div className={this.props.classes.root} />;
42
-
43
- }
44
-
45
- }
46
-
47
-
48
-
49
- export default withStyles(styles)(MyComponent);
50
-
51
- ```
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
- ```ReactJS
60
-
61
- // MainContainer.js
62
-
63
- import React, { Component, PropTypes } from 'react';
64
-
65
- import { bindActionCreators } from 'redux';
66
-
67
- import { connect } from 'react-redux';
68
-
69
-
70
-
71
- // action
72
-
73
- import * as MainAction from 'action/main_action.jsx';
74
-
75
-
76
-
77
- // component
78
-
79
- import Sample from 'component/sample.js';
80
-
81
-
82
-
83
-
84
-
85
- class MainContainer extends Component {
86
-
87
-
88
-
89
- constructor(props) {
90
-
91
- super(props);
92
-
93
- this.state = {}
94
-
95
- }
96
-
97
-
98
-
99
- componentWillMount(props) {}
100
-
101
-
102
-
103
- render() {
104
-
105
- const { reducers, actions } = this.props;
106
-
107
- return (
108
-
109
- <div>
110
-
111
- <Sample params={{test : 123}} />
112
-
113
- </div>
114
-
115
- )
116
-
117
- }
118
-
119
- }
120
-
121
-
122
-
123
-
124
-
125
- function mapStateToProps(state, ownProps) {
126
-
127
- return {
128
-
129
- reducers : Object.assign(
130
-
131
- state.MessengerReducer,
132
-
133
- ),
134
-
135
- }
136
-
137
- }
138
-
139
-
140
-
141
- function mapDispatchToProps(dispatch) {
142
-
143
- return {
144
-
145
- actions : Object.assign(
146
-
147
- bindActionCreators(MessengerAction, dispatch),
148
-
149
- ),
150
-
151
- }
152
-
153
- }
154
-
155
-
156
-
157
-
158
-
159
- export default connect(
160
-
161
- mapStateToProps,
162
-
163
- mapDispatchToProps
164
-
165
- )(MessengerContainer)
166
-
167
-
168
-
169
- ```