材质UI Fab按钮停留在左侧拆分窗格下

Question

如何使 Fab按钮完全可见？它的左半部分始终位于左窗格下。试图增加z-index，但是没有用。

codesandbox

        <UpperPane>
          <Fab
            style={{
              position: "absolute",
              left: "-25px",
              zIndex: 999
            }}
            color="primary"
            aria-label="add"
          >
            <AddIcon />
          </Fab>
        </UpperPane>        

Answer 1

修改CSS属性，它将起作用-

 style={{
          left: "-25px"
       }}

const UpperPane = styled.div`
  height: 100%;
  width: 100%;
  position:fixed; // add this property
  background-color: yellow;
`;

此处的工作沙箱-https://codesandbox.io/s/splitpane-rqenw?file=/demo.tsx

Answer 2

这就是我想要的行为。使用突变观察器进行创建。如果有人有更好的解决方案，则非常欢迎：）

sandbox