使用材质 ui 使卡片组件具有响应性答案

【问题标题】：Making the card component responsive using material ui使用材质 ui 使卡片组件具有响应性
【发布时间】：2020-03-25 07:35:42
【问题描述】：

我正在尝试让我的卡响应移动应用程序

  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>

上面的代码是卡片组件的用户界面，我正在尝试使卡片组件具有移动响应性，但我得到的界面如下所示

卡片和文本字段应该能够响应屏幕大小，但我无法使其工作。有什么办法可以实现吗？

【问题讨论】：

标签： css material-ui

【解决方案1】：

您好，感谢您提出问题，

你可以使用 [theme.breakpoints.down("(XS, sm,md, lg, xl,)")] 的断点：{ maxWidth: 200 // 你可以改变你的卡片组件的大小。 } 这是材质ui Card组件中更清晰的示例

这里是来自material UI Card组件页面的组件，我只添加了useTheme和useMediaQuery导入，并在classes.root下的useStyle里面添加了一个中间断点这里是关于“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>
  );
}

希望对你有帮助

【讨论】：