Адаптивный макет ReactJS не отвечает на первую сетку - PullRequest
Новая
       12

Адаптивный макет ReactJS не отвечает на первую сетку

0 голосов
/ 11 мая 2019

Я использую следующий код для 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

Но во время настройки реагирования на проверку элемента поле Имя не реагирует, и если я выбираю другие параметры экрана мобильного устройства, макет не всегда соответствует назначению.

Может кто-нибудь подсказать, пожалуйста?

1 Ответ

2 голосов
/ 11 мая 2019

Вы должны правильно следовать документации

1) Вы используете класс вместо className.

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

Надеюсь, что поможет !!!

...