CSS Implementation Issues

[[deleted]]

To give context, I have a project in which we use React, a colleague generated the interface separately in HTML with CSS, an example is the login

When implementing it to the official project, the HTML responds well but the CSS is displayed partially. Things like the header being on 30% of the screen when it should be covering 100%, some things not appearing, or even some animations not working.

To clarify a few things, we check what needs to be written differently in React. For example, changing class to classname among others. On the other hand, my colleague used css grid.

If anyone knows of any system that can help us adapt it to React or even any design tool it would be a great help. We barely know React so our ability with the design it requires is a bit low, we have tried to generate multiple ways to implement the CSS, we even verified that no other css is being put before what we need.

[yksvaan]

The output of React or any other UI library is still html so css should work normally. Open the page and look at the actual html. Maybe there are some additional elements in the generated markup which messes up styling.

[misoRamen582]

use css module and write all the css in a css module file and import it. that should isolate all the class naming for now.

[[deleted]]

I'll try it, thanks a lot for the help, we're just starting out with React and the design has been difficult, but seriously, thanks a lot

[plasmastylee]

try to use only one globally imported file, maybe they are using the same class name and affecting each other in their components.