如何将输入表单组件覆盖在 ReactMapGL 组件上？

Question

我是 React 应用程序开发的新手。我正在尝试创建一个使用 ReactMapGL class 来自 react-map-gl 库的反应应用程序。这会渲染地图（我创建了地图组件）。我想显示一个输入表单（我创建了 SampleInputForm 组件）作为此地图上朝向页面右侧的叠加层。我正在为前端 UI 设计使用 material-ui 框架。下面是代码片段：-

    const useStyles = makeStyles((theme: Theme) =>
      createStyles({
       root: {
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
    },
  })
)
      <div className={classes.root}>
        <Map />
        <Sampleinputform />
      </div>

这会在页面下方的地图框区域之外显示表单。如果我在我的地图组件中使用 Sampleinputform 作为子组件，那么它工作正常，我得到一个输入表单作为页面右上角 mapbox 顶部的叠加层，下面是代码片段：-

export default function Map() {
return (
    <ReactMapGL>
      // some code to render the map goes here
      <SampleInputForm/>
    </ReactMapGL>
}

我在第一个代码片段中遗漏了什么，所以我不需要在 Map 组件中传递表单？

Answer 1

使用 help 发现 --

我能够将组件 <SampleInputForm/> 放在 <ReactMapGL> 之外。

.control-panel{
#the styling elements goes here
}

const defaultContainer = ({ children }) => <div className="control-panel">{children}</div>

const SampleInputForm: React.FC = () => {
    const Container = defaultContainer
  return (
    <Container>
          <form noValidate> 
             //Input components goes here
          <form> 
    </Container> )
}

如果有其他更好的解决方案，请提出建议。

如何将输入表单组件覆盖在 ReactMapGL 组件上？

How to put a input form component overlay on ReactMapGL component?

mapbox

reactjs

material-ui

react-map-gl