React Zoom Pan Pinch组件height:100%样式不生效问题求助

问题原因 #

react-zoom-pan-pinch组件会渲染嵌套的内部DOM结构（比如TransformWrapper对应rz-wrapper容器，TransformComponent对应rz-container容器），直接给组件传递className或style只会作用在最外层的组件元素上，无法穿透到内部核心容器；另外height:100%的生效依赖所有父级元素都有明确的高度值，若父级未设置，子元素的100%高度会失效。

解决步骤 #

1. 确保所有父级容器设置明确高度 #

从根容器到TransformWrapper的所有父元素都需要设置height:100%，保证高度能逐层传递：

/* 在styles.css中添加 */
html, body, #root, .App, .element {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 用深度选择器覆盖库内部容器样式 #

利用CSS深度选择器，直接针对组件内部生成的rz-wrapper和rz-container设置高度：
修改你的useStyles配置：

const useStyles = makeStyles({
  wrapper: {
    height: "100%",
    backgroundColor: "red",
    // 深度选择器覆盖内部rz-wrapper的高度
    '& .rz-wrapper': {
      height: '100% !important',
    },
    // 同时覆盖TransformComponent内部的rz-container
    '& .rz-container': {
      height: '100% !important',
    }
  }
});

3. 调整子元素适配容器高度 #

如果需要让图片占满整个容器，给TransformComponent的直接子元素（比如img）设置高度为100%，并调整object-fit属性保证图片显示正常：

<TransformComponent>
  <img
    style={{ width: "100%", height: "100%", objectFit: "contain" }}
    src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
    alt="test 2"
  />
</TransformComponent>

验证效果 #

修改后，TransformWrapper和TransformComponent会继承父级的100%高度，内部的rz-wrapper和rz-container高度已被正确设置，手动调试的效果可以通过代码持久化实现。

内容的提问来源于stack exchange，提问作者walee