Material UI Fab Button 停留在左拆分窗格下方

Question

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

        <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

Material UI Fab Button 停留在左拆分窗格下方

Material UI Fab Button stays under left split-pane

css

material-ui

splitpane