Why the material UI component cannot get Style value in responsive screen? - reactjs

Question

I want my Paper Style automatically changed when the screen is big or medium or small.
here what i have imported
import React from 'react';
import reactMixin from 'react-mixin';
import ResponsiveMixin from 'react-responsive-mixin';
import Paper from 'material-ui/lib/paper';
i use ResponsiveMixin to determine screen changed
Paperstyle={this.state} where i want to have value changed automatically. and those value come from 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);
Your help will greatly appreciated :D Thanks so much!

Answer 1

Why do you store styles in component's state? Try this

Answer 2

The componentDidMount() method runs only one time after the component output has been rendered to the DOM according to the documentation. So event if screen size change, nothing will happen. #Material-UI provide a method called withStyles that helps to wrap styles and provide a classes object that containts all styles you defined. The withStyles method automatically update when screen size change. Here is and exemple:
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
const styles = theme => ({
paper: { // For extra small screens (phones)
height: '100%',
paddingTop: 60,
marginLeft: '3%',
marginRight: '3%',
paddingLeft: '2%',
paddingRight: '2%',
[theme.breakpoints.up('sm')]: { // For small screens (tablets)
paddingLeft: '6%',
paddingRight: '6%'
},
[theme.breakpoints.up('md')]: { // For medium screens and above
marginLeft: 258,
marginRight: 6,
paddingLeft: '4%',
paddingRight: '4%'
}
}
})
export class MainLayout extends React.Component {
render() {
const {header, content, footer, classes} = this.props; // destructure this.props to consts
return (
<div>
<header>
{header}
</header>
<main>
<Paper className={classes.paper} zDepth={1}>
{content}
</Paper>
</main>
<footer>
{footer}
</footer>
</div>
)
}
}
// That injects `classes` object styles in your component
const YourStyledComponent = withStyles(styles)(MainLayout);
export default YourStyledComponent; // Export or do what you want with the component