reactjs - Material-UI 响应式卡片
问题描述
我正在测试 Material-UI。我已经使用 Bootstrap 很长时间了,但我对将一些 React 项目适应 Material-UI 很感兴趣。我一直想弄清楚的是如何在 Material-UI 中创建响应式卡片。过去我非常依赖于 Bootstraps 响应式容器,所以我不明白为什么我的卡片会随着页面扩展但不会随着窗口的压缩而缩小……如果我们打算为这个我很酷,只需要指出正确的方向。
问题:
Material-UI 中的响应式卡片是一回事吗?
还是我们打算编写 css 以使卡片具有响应性?
如果是这样,我在哪里可以学习做到这一点?(过去非常依赖 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
解决方案
谢谢你的问题
回答你的问题:1)不是我知道的 2)不,你不必写很多 css,但是在 usestyles 中有一些 css 3)下面我在你的代码中详细解释了你必须编写的 css。您同时使用内联样式和 useStyles,请尝试将所有样式放入 usestyle hook API 并使其具有响应性。希望这有助于让我知道是否需要使其更清楚。谢谢
据我所知,您可以使用“useMediaQuery”挂钩来使您的设计具有响应性。
这是来自material UI Card组件页面的组件,我只添加了useTheme和useMediaQuery导入,并在classes.root下的useStyle内添加了一个中等断点这里是“useMediaQuery”上的有用链接 https://material-ui.com /组件/使用媒体查询/#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>
);
}
希望这可以帮助
推荐阅读
- c - 如何制作#define函数的for循环?
- visual-studio - Unity 项目,Visual Studio 2019 包含的文件在重新打开时消失
- mysql - 这个查询和子查询有什么问题?
- angular - 创建文件并上传到现有的 zip 文件 S3
- java - 如何指定 statsd 客户端端口?
- vb.net - 如何防止表单在 btnClose_Click 中关闭
- javascript - 如何使用来自另一个 js 类 n react-native 的键从 const 中获取值?
- html - 导航栏消失 - Angular 7
- webassembly - 学习 WebAssembly Uncaught (in promise) TypeError: m._init is not a function
- swift - 不支持的 IOSurface 格式:0x26424741 在场景包中使用 twilio 视频