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>

上面的代码是卡组件的用户界面，我正在尝试使卡组件具有移动响应能力，但下面给出了我得到的界面

卡和文本字段应该能够响应屏幕尺寸，但是我无法使其工作。我有办法实现它吗？

Answer 1

您好，谢谢您提出问题，

您可以使用[theme.breakpoints.down（“（XS，sm，md，lg，xl，）”））的断点：{ maxWidth：200 //您可以更改卡组件的大小。 } 这是材料ui卡组件中更清晰的示例

这是材料UI Card组件页面中的组件，我只添加了useTheme和useMediaQuery导入，并在classes.root下的useStyle内添加了一个中间断点。这是“ useMediaQuery” https://material-ui.com/components/use-media-query/#usemediaquery上的有用链接/ p>

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

希望这会有所帮助

使用材质ui使卡组件响应

1 个答案: