how to automatically change contentStyle when the screen is responsive? - reactjs

Question

I am using Material UI to make a application Layout. To make my layout responsive i use import ResponsiveMixin from 'react-responsive-mixin';
the ResponsiveMixin's doc doesn't provide me React.Component classes as example, so i try to use this import reactMixin from 'react-mixin'; instead.
here my code:
import
import React from 'react';
import reactMixin from 'react-mixin';
import ResponsiveMixin from 'react-responsive-mixin';
import Paper from 'material-ui/lib/paper';
contentStyle
const contentStyle = {
small: {
height: '100%',
width: '98%',
paddingTop: 60,
marginLeft: '1%',
paddingLeft: 0,
paddingRight: 0
},
medium: {
height: '100%',
width: '90%',
paddingTop: 60,
marginLeft: '5%',
paddingLeft: 0,
paddingRight: 0
},
large: {
height: '100%',
width: '80%',
paddingTop: 60,
marginLeft: 280,
paddingLeft: 40,
paddingRight: 40
}
};
this is my component
export class MainLayout extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.media({maxWidth: 600}, function () {
/*small*/
}.bind(this));
this.media({minWidth: 601, maxWidth: 1024}, function () {
/*medium*/
}.bind(this));
this.media({minWidth: 1025}, function () {
/*large*/
}.bind(this));
}
render() {
const {header, content, footer} = this.props; // destructure this.props to consts
return (
<div>
<header>
{header}
</header>
<main>
<Paper style={contentStyle} zDepth={1}>
{content}
</Paper>
</main>
<footer>
<Paper style={contentStyle}>
{footer}
</Paper>
</footer>
</div>
)
}
}
reactMixin(MainLayout.prototype, ResponsiveMixin);
ResponsiveMixin is located above
componentDidMount(){/contain responsiveMixin Function/}
Thanks for your help :D

Answer 1

Material UI favors inline styles (with its nice theming) so if you want to do it that way, you do it like this:
import React from 'react'
import {Mixins} from 'material-ui'
const {StylePropable, StyleResizable} = Mixins
export default React.createClass({
// Boilerplate and React lifecycle methods
propTypes: {
onChangeMuiTheme: React.PropTypes.func,
},
contextTypes: {
muiTheme: React.PropTypes.object,
},
mixins: [StylePropable, StyleResizable],
getInitialState() {
return {
}
},
// Helpers
getStyles() {
let styles = {
text: {
fontSize: 12,
color: this.context.muiTheme.rawTheme.palette.primary1Color
}
}
// example of a screen-size sensitive style
if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM)) { // active for >= MEDIUM
styles.text.fontSize = 20
}
return styles
},
render() {
let styles = this.getStyles()
return (
<p style={styles.text}>Hello world!</p>
)
}
})