使用材料ui使卡组件响应

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

你好，谢谢你的提问，

您可以使用[主题断点.向下("(XS，sm，md，lg，xl，("(]的断点：{maxWidth:200//您可以更改卡组件的大小。}以下是材料ui卡组件的一个更清晰的例子

这是来自材料UI卡组件页面的组件，我只添加了useTheme和useMediaQuery导入，并在classes.root下的useStyle中添加了一个介质断点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>
);
}

希望这能帮助