Question

我正在为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

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

有人可以请他吗？

Answer 1

您应该正确遵循文档

1）您使用的是class而不是className。

2）您没有使用styles对象，也没有使用Styles高阶组件。

Demo.js文件以供参考：-和工作code sandbox link

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

希望有帮助！

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

1 个答案: