Reactjs 如何使用物料UI卡填充反应网格布局项

我使用React Grid layout来显示一个小部件网格

这是我的网格组件：

 class WidgetsGrid extends Component {
    render() {
      var layout = [
        { i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 }
      ];
      var layouts = { lg: layout };
      return (
        <ResponsiveReactGridLayout
          className="layout"
          layouts={layouts}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        >
          <div key="a">
            <FirstWidget />
          </div>
        </ResponsiveReactGridLayout>
      );
    }
  }

类WidgetsGrid扩展组件{ render（）{ 变量布局=[ {i:a'，x:0，y:0，w:3，h:3，minW:2，maxW:4} ]; var布局={lg:layout}； 返回( ); } } 我在网格中显示一个子（FirstWidget）：

class FirstWidget extends Component {
    render() {
      return (
        <Card style={styles.main}>
          <IconActivity style={styles.activity} color={green500} />
          <CardHeader title="Premier Widget" subtitle="Sous-titre" />
          <CardText>
            <BarChart />
          </CardText>
          <div style={styles.footer}>
            <h6 style={styles.timeText}>
              <IconTime style={styles.iconText} />
              <span>Actualisé il y a 5 minutes</span>
            </h6>
          </div>
        </Card>
      );
    }
  }

class FirstWidget扩展组件{
render（）{
返回(
每天5分钟
);
}
}

问题是显示不正确，FirstWidget卡没有填充div父级（div key=“a”），如下图所示：

那么我如何解决这个问题呢

---

谢谢您的帮助。

为了解决这个问题，我通过传递styles prop将

高度：inherit

属性从我的容器发送给我的孩子

我的容器：WidgetsGrid.js

const styles = {
  main: { 
    backgroundColor: "#ffffff",
    height: "inherit"
  }
}

class WidgetsGrid extends Component {
    render() {
      var layout = [
        { i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 }
      ];
      var layouts = { lg: layout };
      return (
        <ResponsiveReactGridLayout
          className="layout"
          layouts={layouts}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        >
          <div key="a">
            <FirstWidget style={styles} />
          </div>
        </ResponsiveReactGridLayout>
      );
    }
  }

const styles={
main:{
背景颜色：“ffffff”，
高度：“继承”
}
}
类WidgetsGrid扩展了组件{
render（）{
变量布局=[
{i:a'，x:0，y:0，w:3，h:3，minW:2，maxW:4}
];
var布局={lg:layout}；
返回(
);
}
}

然后在我的childFirstWidget.js中，我通过将样式设置为等于样式来获得高度继承道具：

class FirstWidget extends Component {
    render() {
      return (
        <Card style={this.props.style.main}>
          <IconActivity style={styles.activity} color={green500} />
          <CardHeader title="Premier Widget" subtitle="Sous-titre" />
          <CardText>
            <BarChart />
          </CardText>
          <div style={styles.footer}>
            <h6 style={styles.timeText}>
              <IconTime style={styles.iconText} />
              <span>Actualisé il y a 5 minutes</span>
            </h6>
          </div>
        </Card>
      );
    }
  }

class FirstWidget扩展组件{
render（）{
返回(
每天5分钟
);
}
}

---

通过这种方式，高度首先由容器中的div通过react grid layout定义，然后强制物料UI卡将其高度设置为与容器相同的高度，以便您可以根据需要填充所有div。

是否有可能创建问题的代码沙盒，例如物料UI中的示例：。一般来说，您试图实现的目标可能是通过flexBox css定义实现的：谢谢您的回答dauffret！flexbox的技巧非常有效！我还解决了应用于childGreat的属性“height:inherit”的问题！您愿意分享您的解决方案吗？这可能会帮助下一个遇到你问题的人！抱歉，我迟到了，但您现在可以看到下面的解决方案：）