Создание адаптивного компонента карты с использованием пользовательского интерфейса материала

Question

Я пытаюсь заставить мою карту реагировать на мобильные приложения

  const styles = {
  edit: {
    width: "40%",
    marginLeft: 270,
    background: "#76ff03"
  },
  add: {
    width: "100%",
    background: "#18ffff",
    size: "large"
  },
  root: {
    minHeight: 210,
    minWidth: 100
  }
};



 <Container maxWidth="md">
  {/*marginTop:15*/}
  <Typography component="div" style={{  borderColor:'#00c853' }}>
    {/*style={{  height: '30vh' }}*/}
    <Card style={styles.root}>
      <Typography variant="overline" color="secondary" style={{fontFamily:'Roboto',margin:10}}>
        All about your needs
      </Typography>
      <form onSubmit={this.validateItem} autoComplete='off'>
        <TextField id="outlined-full-width" label="Input" style={{  width:'90%',marginTop:30 ,marginLeft:40 }}
          placeholder="Add A Todo Item " margin="normal" InputLabelProps={{
                              shrink: true,
                          }} error={this.state.errorState} helperText={ this.state.errorState
          && "Item name can't be blank" } size="large" variant="outlined" value={newItem} onChange={handleInput} />
        <Grid container justify='center' alignContent='center'>
          <Grid item xs={12} md={6}>
            {buttonChange()}
          </Grid>
        </Grid>
      </form>
    </Card>
  </Typography>
</Container>
</div>

Приведенный выше код является пользовательским интерфейсом для компонента карты, я пытаюсь сделать компонент карты мобильным, но интерфейс я get вместо приведен ниже

Карта и текстовое поле должны реагировать на размер экрана, но я не могу заставить его работать. Есть ли способ, которым я могу это сделать?

Answer 1

Здравствуйте и спасибо за вопрос,

вы можете использовать точку останова [theme.breakpoints.down ("(XS, sm, md, lg, xl,)")]: {maxWidth : 200 // Вы можете изменить размер компонента вашей карты. } Вот более понятный пример из компонента карты пользовательского интерфейса

Вот компонент со страницы компонента карты пользовательского интерфейса материала, я только добавил импорт useTheme и useMediaQuery и добавил среднюю точку останова внутри useStyle в классах. root Вот полезная ссылка на «useMediaQuery» https://material-ui.com/components/use-media-query/#usemediaquery

import { useTheme } from "@material-ui/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";

const useStyles = makeStyles(theme => ({
  root: {
    maxWidth: 345,
    [theme.breakpoints.down("md")] : {
    maxWidth: 200 
    }
  },
  media: {
    height: 140
  }
}));
const Card = () =>  {
  const classes = useStyles();
  const theme = useTheme();

  const matches = useMediaQuery(theme.breakpoints.up("sm"));
  return (

    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          className={classes.media}

          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

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