如何在React JS中管理布局和对齐？

Question

我最近开始用React编写代码。一切都很好，只是我找不到合适的方法来管理UI中的布局和对齐方式。我在UI5框架中经验丰富，在那里这些东西都是开箱即用的，但在这里我找不到这样的东西-提供者库。

我也为React lib使用了UI5-WebComponents，但只有像FlexBox和spacing这样的东西。

不知何故，我通过依赖预定义的布局组件或控件，避免了大规模使用CSS。有没有类似的东西可以在React中使用？

我将非常感谢您的帮助。

Answer 1

这是启动React时的常见调整。以下是对我起作用的方法。

在开发过程中，我将样式按如下方式排列

<MyReactComponent style={{top:'50%',position:'absolute'}} >
...
</MyReactComponent>

一旦我移动到生产环境，我就可以将样式移动到.css文件中

.MyReactComponentStyles {
   position: absolute;
   top: 50%;
}

然后将样式传递给组件

<MyReactComponent className="MyReactComponentStyles" >
...
</MyReactComponent>