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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

2561閲覧

reactjsのmaterial-uiでwithStyles使用時にpropsも渡したい

TakakiKuwabara

総合スコア38

Material-UI

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2017/10/29 14:17

編集2018/11/13 02:07

ReactJSとMaterial-UI@Nextでフロントエンド開発を行なっています。
withStylesでstyleSheetを適用するというのがMaterial-UIのコンポーネントのカスタマイズ方式なのですが、この時にパラメータも同時に渡す方法を探しています。

下記のコード、Sample.jsをContainerから使用します。
<Sample params={{test : 123}}> というように、Sample.js内でpropsを受け取り、DOM生成の仕組みを作りたいのです。
しかし、withStylesを使用する場合、このparamsが使用できないため、何か方法がないか試行錯誤しています。
わかる方がいらっしゃれば、お願い致します。

ReactJS

1// Sample.js 2import { withStyles } from 'material-ui/styles'; 3 4const styles = { 5 root: { 6 background: 'red', 7 }, 8}; 9 10class MyComponent extends React.Component { 11 render () { 12 return <div className={this.props.classes.root} />; 13 } 14} 15 16export default withStyles(styles)(MyComponent);

ReactJS

1// MainContainer.js 2import React, { Component, PropTypes } from 'react'; 3import { bindActionCreators } from 'redux'; 4import { connect } from 'react-redux'; 5 6// action 7import * as MainAction from 'action/main_action.jsx'; 8 9// component 10import Sample from 'component/sample.js'; 11 12 13class MainContainer extends Component { 14 15 constructor(props) { 16 super(props); 17 this.state = {} 18 } 19 20 componentWillMount(props) {} 21 22 render() { 23 const { reducers, actions } = this.props; 24 return ( 25 <div> 26 <Sample params={{test : 123}} /> 27 </div> 28 ) 29 } 30} 31 32 33function mapStateToProps(state, ownProps) { 34 return { 35 reducers : Object.assign( 36 state.MessengerReducer, 37 ), 38 } 39} 40 41function mapDispatchToProps(dispatch) { 42 return { 43 actions : Object.assign( 44 bindActionCreators(MessengerAction, dispatch), 45 ), 46 } 47} 48 49 50export default connect( 51 mapStateToProps, 52 mapDispatchToProps 53)(MessengerContainer) 54

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

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

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

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

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

guest

回答1

0

自己解決

解決はしましたがmaterila-uiが微妙なのでやめました。

投稿2017/11/01 04:50

TakakiKuwabara

総合スコア38

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問