时间戳

首页 > 解决方案 > ReactJS 响应式布局对第一个网格无响应

reactjs - ReactJS 响应式布局对第一个网格无响应

问题描述

我正在为 App.js 使用以下代码

import React, {Component} from "react"
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';


const styles = theme => ({
    root: {
        flexGrow: 1,
      },   

  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
  },
});

class App extends Component {        
    render() {
        return (
            <main>
                <div class="root">
                            <Grid container spacing={2}>
                            <Grid item xs={6}>
                            <TextField
                                id="filled-name"
                                label="First Name"                                  
                                margin="normal"
                                variant="filled"
                                />
                            </Grid>
                            <Grid item xs={2}>
                            <TextField
                                id="filled-name"
                                label="Last Name"
                                margin="normal"
                                variant="filled"
                                />   
                            </Grid>
                        </Grid>

                    </div>
            </main>
        )
    }
}

export default App

但是在检查元素响应设置期间，名字框没有响应，如果我选择不同的移动屏幕选项，布局并不总是如预期的那样。

有人可以发表意见吗？

标签： reactjsmaterial-ui

解决方案

您应该正确遵循文档

1）您使用的是类而不是类名。

2）您没有使用样式对象，也没有使用带有样式的高阶组件。

Demo.js供参考的文件：- 和工作代码沙箱链接

import React, { Component } from "react";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  root: {
    flexGrow: 1
  },

  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 100
  }
});

class Demo extends Component {
  render() {
    const { classes } = this.props;
    return (
      <main>
        <div className={classes.root}>
          <Grid container spacing={24}>
            <Grid item xs={12} sm={6}>
              <TextField
                id="filled-name"
                label="First Name"
                margin="normal"
                variant="filled"
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="filled-name"
                label="Last Name"
                margin="normal"
                variant="filled"
              />
            </Grid>
          </Grid>
        </div>
      </main>
    );
  }
}

export default withStyles(styles)(Demo);

希望有帮助！！！

推荐阅读