如何用 material UI Card 填充 React Grid Layout item

Question

我正在使用 React Grid 布局来显示小部件网格。

这是我的网格组件：

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

我在网格内显示一个子项 (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>
      );
    }
  }

问题是显示不正确，FirstWidget 卡没有填充 div 父项（div 键="a"），如您在下图：

那我该如何解决呢？

感谢您的帮助。

Answer 1

为了解决这个问题，我通过传递样式属性将 height: inherit 属性从我的容器发送到我的 child。

我的容器：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>
      );
    }
  }

然后在我的 child FirstWidget.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>
      );
    }
  }

这样高度先由react-grid-layout和容器中的div定义，然后materialUI卡强制设置高度等于其容器的相同高度，因此您可以根据需要填充所有 div。

如何用 material UI Card 填充 React Grid Layout item

How to fill React Grid Layout item with material UI Card

reactjs

material-ui

react-grid-layout