我正在使用 Material-UI 版本 1 在我的 React 应用程序中制作网格 UI。我想让网格响应。 GridList 组件 API 有 cols 属性，默认为 2。
例如，它可能如下所示。
<GridList cols={1} spacing={32} className="list"></GridList>
我可以动态更改道具吗？或者有没有其他方法让它响应？
【问题讨论】：
标签： reactjs responsive material-ui
你可以使用 MUI 提供的layout breakpoints 来切换 GridList 或 GridListTile cols 属性。 代码将如下所示：
...
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
...
const MyComponent = props => {
const getGridListCols = () => {
if (isWidthUp('xl', props.width)) {
return 4;
}
if (isWidthUp('lg', props.width)) {
return 3;
}
if (isWidthUp('md', props.width)) {
return 2;
}
return 1;
}
return(
...
<GridList spacing={15} cellHeight={400} cols={getGridListCols()}>
{
myItemsArray.map(item => (
<GridListTile key={item} cols={1}>
<FooBar />
</GridListTile>
))
}
</GridList>
...
);
};
...
export default withWidth()(MyComponent);
【讨论】：
withWidth 将在浏览器宽度更改时请求重新渲染。注意：您现在可以按照此处的建议使用 useWidth React 挂钩。
您可以根据宽度 (xs, sm, md, lg, xl) 选择 cols 值，请查看此示例，其中为较小的屏幕设置了 1 列。
import React from "react";
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import withWidth from '@material-ui/core/withWidth';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
const styles = theme => ({ });
class MyComponent extends React.Component {
render() {
const { classes, currentUser, images, width } = this.props;
let columns = width === 'xs' || width === 'sm' ? 1 : 2;
return (
<div className={classes.root}>
<GridList cellHeight={180} cols={columns} className={classes.gridList}>
{images.map(image => (
<GridListTile key={image.id}>
<img src={ image.path } />
<GridListTileBar
title={ image.name }
/>
</GridListTile>
))}
</GridList>
</div>
);
}
}
MyComponent.propTypes = {
currentUser: PropTypes.object,
images: PropTypes.array.isRequired
};
function mapStateToProps(state) {
return {
currentUser: state.user.currentUser
};
}
export default compose(
withStyles(styles, {
name: 'MyComponent',
}),
withWidth(),
connect(mapStateToProps),
)(MyComponent);
【讨论】：
从 Material-UI v4.4 开始，您可以将 use useMediaQuery React hook 与 theme.breakpoints.up 结合使用：
import useMediaQuery from '@material-ui/core/useMediaQuery';
function MyComponent() {
const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}
⚠️ 没有默认主题支持，您必须将其注入到父主题提供程序中。
【讨论】：
我刚遇到这个问题，在使用@morlo 的答案时，我犯了一个错误，它开始显示一个 js 错误，但奇怪的是它也让它响应了！所谓响应式，我的意思是它显示了移动设备中常见的水平滚动。
所以我删除了该代码并使用了不同的值，cols={0} 起作用了！
也许它没有记录，但它确实有效。
还值得一提的是我使用的其他一些设置：
<GridList style={{
width: '100%',
maxHeight: 320,
flexWrap: 'nowrap'
}} cols={0} cellHeight={'auto'}>
...
</GridList>
【讨论】：
当你说你想让网格响应时，你的意思是动态添加更多项目吗？如果没有，默认情况下Material-UI 是响应式的（这意味着您的视口会根据您查看的设备动态调整大小），并且根据您的GridList 属性（如列、行、间距等），您可以确定样式。如果您查看https://material-ui-next.com/demos/grid-list/，这里有一些示例可以帮助您入门。
【讨论】：
cols 属性:)