reactjsui5-webcomponents

How to manage layout and alignment in React JS?

I recently began coding in React. It is all good, except that i can not find the proper way to manage layouts and alignment in the UI. I am experienced in the UI5 framework where these things come out of the box, but here i can not find such thing-provider library.

I am also using the UI5-WebComponents for React lib, but there are only things like FlexBox and spacing.

Somehow I have avoided using CSS on a large scale, by relying on pre-defined layout components or controls. Is there something similar which I can use in React?

I will be grateful for any help

Solution

  • This is a common adjustment when starting React. Here is what worked for me.

    While in development I put styles in line as follows

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

    Once I move to production I can take the styles and move them to .css file

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

    then pass the styles on to the component

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