屏幕响应时如何自动更改contentStyle? [英] how to automatically change contentStyle when the screen is responsive?

问题描述

我正在使用Material UI制作应用程序布局.为了使布局具有响应性，我使用从'react-sensitive-mixin'中导入ResponsiveMixin; ResponsiveMixin的文档没有为我提供React.Component类作为示例，因此我尝试使用此 import from'react-mixin';

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.

这是我的代码:

导入

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

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

contentStyle

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位于上方 componentDidMount(){/包含响应式Mixin函数/}

ResponsiveMixin is located above componentDidMount(){/contain responsiveMixin Function/}

感谢您的帮助:D

推荐答案

材料UI支持内联样式(具有漂亮的主题)，因此，如果要这样做，就可以这样做:

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>
    )
  }

})

这篇关于屏幕响应时如何自动更改contentStyle?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！