[GridList] Composition: width and height not calculated if made into a component

[litkod]

Using the guide from https://material-ui.com/demos/grid-list/, when the GridListTile is extracted into a component, the width and height of the tile will not be calculated.

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Width and height of the tile should calculated into style, e.g. style="width: 33.3333%; height: 204px; padding: 2px;".

Current Behavior

Width and height of the tile does not appear in GridListTile dom.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/0y38lj2r0n

1. Copy Image-only Grid list code from https://material-ui.com/demos/grid-list/
2. Extract GridListTile into a component
3. Notice image is now full width height instead (no width height calculation performed)

Context

Wanted to extract the component for simplification as code was too long.

Your Environment

Tech	Version
Material-UI	v1.2.2
React	16.4.1
browser	Chrome Version 66.0.3359.181
etc

[oliviertassinari]

Broken Sample:

@lunateck Yes, it's expected. You need to respect the demo structure.

Alternative (but image scaling is broken):
Wanted to extract the component for simplification as code was too long.

How is this example simpler?

[oliviertassinari]

Following our documentation, here is how it should be done:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
import tileData from "./tileData";

const styles = {
  root: {
    width: 500,
    height: 450
  }
};

function GridListItem({ img, title, cols, ...other }) {
  return (
    <GridListTile key={img} cols={cols || 1} {...other}>
      <img src={img} alt={title} />
    </GridListTile>
  );
}

function ImageGridList(props) {
  const { classes } = props;

  return (
    <GridList cellHeight={160} className={classes.root} cols={3}>
      {tileData.map(tile => <GridListItem key={tile.img} {...tile} />)}
    </GridList>
  );
}

ImageGridList.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ImageGridList);

https://codesandbox.io/s/5zmzyx0vpp