如何将此React组件的位置更改为fixed？
如何将此React组件的位置更改为fixed？
提问于 2020-09-14 10:47:25
我使用react-particles webgl npm包来渲染这个webgl画布：
我想让画布占据整个屏幕。当我在Chrome开发者工具中将这个元素的位置更改为"fixed“时，它占据了整个屏幕。因此，我将粒子字段元素的内联样式更改为，但它仍然显示该位置在chrome开发工具中是相对的。我如何改变这一点？
回答 2
Stack Overflow用户
发布于 2020-09-14 10:58:04
这意味着ParticleField可能没有style prop。您可以添加样式作为ParticleField的属性，或者使用ParticleField包装div，然后对该div使用style={{position:fixed}}
<div style={{ position: "fixed" }}><ParticleField /></div>Stack Overflow用户
发布于 2020-09-14 11:37:12
您正在使用的库的Look at the source。关键部分是组件中的return语句，它实际上是您的呈现：
return (
<scene>
<group ref={group}>
{/* Bounding box that particles exist inside of */}
{showCube && (
<boxHelper>
<mesh name="object">
<meshBasicMaterial
attach="material"
color="white"
blending={AdditiveBlending}
wireframe
transparent
/>
<boxBufferGeometry attach="geometry" args={[r, r, r]} />
</mesh>
</boxHelper>
)}
{/* Lines connecting particles */}
{lines.visible && (
<lineSegments
geometry={lineMeshGeometry}
material={lineMeshMaterial}
/>
)}
{/* Particles */}
{particles.visible && (
<points geometry={pointCloudGeometry} material={pointMaterial} />
)}
</group>
</scene>
);根据我在这里看到的内容，我会以<scene style={{ position:fixed; }}>为目标。另一种选择可能是通过像styled-components这样的东西作为HOC来提供它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63877462
复制相关文章
相似问题
腾讯云开发者
