如何使React Material-UI中的GridList组件响应

Question

I'm using the Material-UI version 1 to make the grid UI in my React application. I want to make the grid responsive. The GridList component API has cols props, which by default is 2 .

For example, it could looks like this below.

<GridList cols={1} spacing={32} className="list"></GridList>

Can I dynamically change the props? Or are there any other ways to make it responsive?

Answer 1

U can use the layout breakpoints provide by MUI to toggle GridList or GridListTile cols property. The code will look like this:

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

Answer 2

You can choose the cols value depending on the width ( xs, sm, md, lg, xl ), look at this example where 1 column is set for smaller screens.

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

Answer 3

When you say you want to make the grid responsive, do you perhaps mean adding more items dynamically? If not, by default Material-UI is responsive (meaning your viewport is dynamically sized depending on the device you view on), and depending on your GridList properties (like cols, rows, spacing etc) you can determine the style. If you have a look at https://material-ui-next.com/demos/grid-list/ there are a few examples to get you started.