Material-UI Responsive Cards

Question

I'm in the process of testing out Material-UI. I've been using Bootstrap for a long time, but am interested in adapting some React projects to Material-UI. Something I've been trying to figure out is how to create responsive cards in Material-UI. I've leaned pretty heavily on Bootstraps responsive containers in the past, so I can't understand why my cards expand with the page but don't shrink as the window is condensed...If we're meant to write custom css for this I'm cool with that, just need to be pointed in the right direction.

Questions:

1. Are responsive cards in Material-UI out of the gate a thing?

2. Or are we meant to write the css to make the cards responsive?

3. If so, where can I learn to do that? (leaned on Bootstrap a lot in the past)

Thanks in advance for your help!

...
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

You can wrap your card in a container with responsive options or use grids, which is very convenient.

Answer 2

Thank you for your question

To answer your questions: 1) not that I know of 2) no you dont have to write alot of css, but yes some css in the usestyles 3) Below I explained in detail the css you have to write, in your code. You are using inline styles and useStyles at the same time, try putting all your styles in the usestyle hook API instead and make it responsive. Hope this helps let me know if I need to make it clearer. Thank you

as far as I know, you can use the "useMediaQuery" hook to make your design responsive.

Here is the component from the material UI Card component page, I only added the useTheme and useMediaQuery imports, and added a medium breakpoint inside useStyle under classes.root Here is a useful link on "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>
  );
}

Hope this helps