ReactAntDesign奇葩BUG：AntDesign组件无法被Row组件完全包裹？

React Ant Design框架下，`Row`组件无法完全包裹子组件（如`Card`组件）是常见布局问题。其根本原因在于`Row`组件默认高度为0px，导致子组件撑不开其高度而溢出。本文将详细分析此问题，并提供解决方案：通过自定义CSS类，覆盖`Row`组件的默认高度样式，设置`height: auto;`使其高度根据子组件自动调整，从而解决组件溢出问题，确保所有子组件完整显示在`Row`组件内。

React Ant Design 中的 CSS 布局难题：组件溢出

在使用 React Ant Design 框架时，开发者经常会遇到 CSS 布局问题，导致组件显示异常。本文将分析一个常见问题：Ant Design 组件无法被 Row 组件完全包含。

如上图所示，Card 组件的一部分超出了 Row 组件的边界。

问题原因分析

这个问题的根本原因在于 Ant Design 的 Row 组件默认高度为 0px。这意味着，子组件无法撑开 Row 组件的高度，从而导致溢出。

解决方案

解决方法是覆盖 Row 组件的默认高度样式。我们可以通过自定义 CSS 类来实现：

/* 自定义 Row 样式 */
.ant-row-custom {
  height: auto; /* 设置高度为自动 */
}

然后，将自定义类应用到 Row 组件上：

...

通过设置 height: auto;，Row 组件的高度将根据其子组件（Card 组件）的高度自动调整，从而解决组件溢出的问题。 这样就能确保 Card 组件完全在 Row 组件内显示。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《ReactAntDesign奇葩BUG：AntDesign组件无法被Row组件完全包裹？》文章吧，也可关注golang学习网公众号了解相关技术文章。