マテリアルUIコンポーネントがレスポンス画面でスタイル値を取得できないのはなぜですか？

Question

画面のサイズが大きくても小さくても、自分のペーパースタイルを自動的に変更したい。私は、画面を決定するためにResponsiveMixinを使用私は

import React from 'react'; 
import reactMixin from 'react-mixin'; 
import ResponsiveMixin from 'react-responsive-mixin'; 

import Paper from 'material-ui/lib/paper'; 

を輸入してきたここ

私が持っていると思います

紙スタイル= {this.state}を変更値は自動的に変更されました。 componentDidMountから来およびそれらの値（）

export class MainLayout extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      height: '100%', 
      paddingTop: 60, 
      marginLeft: 258, 
      marginRight: 6, 
      paddingLeft: '4%', 
      paddingRight: '4%' 

     } 
    } 

    componentDidMount() { 
     this.media({maxWidth: 600}, function() { 
      /*small*/ 
      this.state = { 
       height: '100%', 
       paddingTop: 60, 
       marginLeft: '3%', 
       marginRight: '3%', 
       paddingLeft: '2%', 
       paddingRight: '2%' 
      } 
     }.bind(this)); 

     this.media({minWidth: 601, maxWidth: 1024}, function() { 
      /*medium*/ 
      this.state = { 
       height: '100%', 
       paddingTop: 60, 
       marginLeft: '3%', 
       marginRight: '3%', 
       paddingLeft: '6%', 
       paddingRight: '6%' 
      } 
     }.bind(this)); 

     this.media({minWidth: 1025}, function() { 
      /*large*/ 
      this.state = { 
       height: '100%', 
       paddingTop: 60, 
       marginLeft: 258, 
       marginRight: 6, 
       paddingLeft: '4%', 
       paddingRight: '4%' 
      } 
     }.bind(this)); 
    } 

    render() { 

     const {header, content, footer} = this.props; // destructure this.props to consts 
     return (
      <div> 
       <header> 
        {header} 
       </header> 
       <main> 
        <Paper style={this.state} zDepth={1}> 
         {content} 
        </Paper> 
       </main> 
       <footer> 
        {footer} 
       </footer> 
      </div> 
     ) 
    } 
} 
reactMixin(MainLayout.prototype, ResponsiveMixin); 

あなたのヘルプは大歓迎だろう

：Dのおかげでそんなに！

Answer 1

なぜコンポーネントの状態でスタイルを保存しますか？ Try this