Material-UI Отзывчивые Карты

Question

Я в процессе тестирования Material-UI. Я давно пользуюсь Bootstrap, но мне интересно адаптировать некоторые проекты React к Material-UI. Я пытался понять, как создавать адаптивные карты в Material-UI. В прошлом я довольно сильно опирался на реагирующие с Bootstraps контейнеры, поэтому я не могу понять, почему мои карты расширяются со страницей, но не сжимаются при сжатии окна ... Если мы собираемся написать пользовательский css для этого я крут с этим, просто нужно указать в правильном направлении.

Вопросы:

1. Являются ли адаптивные карты в Material-UI вне ворот существом?

2. Или мы имеем в виду написать css, чтобы сделать карты отзывчивыми?

3. Если так, где я могу научиться делать это? (опирался на Bootstrap много в прошлом)

Заранее спасибо за вашу помощь!

...
useStyles = () => makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    paper: {
      padding: theme.spacing.unit,
      textAlign: "center",
      color: theme.palette.text.secondary,
      marginBottom: theme.spacing.unit
    },
  }));

  render() {
    const {baseData} = this.state;
    const {hfcMetrics} = this.state;
    const {stateMember} = this.state;
    const {stateName} = this.state;
    const {states} = this.state;
    const {lineVizData} = this.state;
    const classes = this.useStyles();

    return (this.state.doneLoading === false ? (
      <div className={classes.root}>
        <Grid container>
          <Grid item xs={12}>
            <ReactLoading type={"spinningBubbles"} color={"black"} height={'10%'}
                          width={'10%'} id='spinner'/>
          </Grid>
        </Grid>
      </div>
        ) 
        :
        (stateMember === true ?
      <div className={classes.root}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Card>  
              <CardHeader
                title="Options" 
              />
              <CardContent style={{ width: '100%', height: 300 }}>
                <LineViz 
                  data={lineVizData}
                  state={stateName}
                  source='compareTool'
                  states={states}
                  vizKey={this.state.vizKey}
                  /> 
              </CardContent>
              <CardActions>
                <Button size="small" color="primary">
                  Share
                </Button>
                <Button size="small" color="primary">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item xs={6}>
            <Card ref={this.elRef}>  
              <CardHeader
                title="Comparison Analysis" 
                action={
                  <ButtonGroup variant="text" color="primary" aria-label="text primary button group">
                    <YearDropDown2 
                      year={this.state.year}
                      handleChange={this.toggleYear}
                    /> 
                    <IconButton color='default' component="span"
                      onClick={() => this.resetStateToggle()}><AutorenewRoundedIcon/></IconButton>
                  </ButtonGroup>
                }
              />
              <CardContent style={{padding: 0}}>
                <DataCompareTable
                  data={this.state.compareData} 
                  metric={this.state.metric}
                  stateName={this.state.stateName}
                  compareCount={this.state.compareCount}
                  handleChange={this.toggleStateName}
                  toggleOne={this.state.toggleOne}
                  toggleTwo={this.state.toggleTwo}
                  toggleThree={this.state.toggleThree}
                />
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>xs=6</Paper>
          </Grid>
        </Grid>
      </div>
      : '' 
      )
    )
  }
}

export default CompareTool

Answer 1

Спасибо за ваш вопрос

Чтобы ответить на ваши вопросы: 1) не знаю, что я знаю 2) нет, вам не нужно писать много css, но да немного css в стилях использования 3 ) Ниже я подробно объяснил css, который вы должны написать в своем коде. Вы используете встроенные стили и одновременно используете стили, попробуйте вместо этого поместить все свои стили в API ловушек usestyle и сделайте его отзывчивым. Надеюсь, что это поможет, дайте мне знать, если мне нужно сделать это яснее. Спасибо

, насколько я знаю, вы можете использовать хук "useMediaQuery", чтобы сделать ваш дизайн отзывчивым.

Вот компонент со страницы компонента UI Card материала, я только добавил импорт 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>
  );
}

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