React中Allotment.Pane设置paddingRight样式不生效问题

基于React技术栈开发时，使用allotment库实现可拖拽调整尺寸的分面板功能，直接给Allotment.Pane组件传入paddingRight内联样式不会产生任何效果。已知可通过在Pane内部嵌套额外div包裹内容的方式间接实现面板间距，需要明确该样式失效的根本原因。

复现代码如下：

import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";

export default function App() {
  return (
    <div className="App">
      <div style={{ display: "flex", height: "100%", background: "darkblue" }}>
        <div
          style={{
            border: "1px solid orange",
            width: "100px",
            height: "100%",
            background: "gray"
          }}
        >
          Menu
        </div>
        <div style={{ width: "100%", height: "100%" }}>
          <div
            style={{
              width: "100%",
              height: "100%",
              background: "red",
              border: "3px solid yellow"
            }}
          >
            <Allotment>
              <Allotment.Pane
                minSize={110}
                maxSize={200}
                style={{ paddingRight: "10px" }}
              >
                <Allotment vertical>
                  <Allotment.Pane minSize={500}>
                    <div style={{ height: "40px", background: "brown" }}>
                      Components
                    </div>
                    <div
                      style={{
                        display: "flex",
                        height: "100%",
                        flexDirection: "column",
                        justifyContent: "space-between"
                      }}
                    >
                      <div>
                        <img
                          style={{ width: "100%", height: "auto" }}
                          src={require("./the-mandalorian.jpg")}
                          alt="cat"
                        />
                      </div>
                      <div
                        style={{ height: "20px", background: "brown" }}
                      ></div>
                    </div>
                  </Allotment.Pane>
                </Allotment>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}>
                  Preview
                </div>
                <div
                  style={{
                    display: "flex",
                    height: "100%",
                    flexDirection: "column",
                    justifyContent: "space-between"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
            </Allotment>
          </div>
        </div>
      </div>
    </div>
  );
}

• 组件样式透传限制：Allotment.Pane是库内部定义的逻辑组件，并非原生DOM元素的透明封装，不会将用户传入的style属性完整合并到最终渲染的面板根DOM节点上。示例中传入的paddingRight: "10px"从始至终没有被挂载到真实DOM上，自然不会产生样式效果。
• 布局逻辑的设计约束：Allotment的拖拽调整尺寸能力，核心依赖JS动态计算每个面板的宽高、偏移位置，以及拖拽分隔条的定位。整套计算逻辑默认所有面板容器不存在padding、border等会改变标准盒模型内容区尺寸的属性，如果允许直接给Pane根节点设置padding，会直接导致尺寸计算错误、拖拽分隔条错位、面板内容溢出等问题，因此库在设计层面就屏蔽了直接修改Pane根节点盒模型属性的能力。

已知的嵌套内部div实现间距的方案，是该场景下的标准实践，不会侵入和破坏库内部的布局计算逻辑，可以稳定使用。

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