flex layout class has different specificity between client and SSR

[cesareian]

When using flex layout in client, it creates inline styles which will override most of the styling done inside style files. However, when SSR is enabled, flex layout is creating simple classes which are being overridden by other classes.

In my opinion flex layout need to create classes with the same specificity in both client and SSR.

Client

As you can see from the above screenshot, flex layout styling is done inline so it will override the styling provided by class (in this case, the min-width)

SSR

As you can see, flex layout in SSR specifies a simple class which is overridden by the normal class

Is there something which can be done at the moment? If not, should this be fixed?

[CaerusKaru]

I agree this is not ideal. Our intention when we implemented this was to mainly just get it to work. The reason we couldn't do inline styles with SSR is because media queries cannot be inlines on elements. And that's pretty much the ballgame. We also didn't want to use important without studying the implications, which again was left for future review.

CSS specificity is tricky for a third-party library, especially one so solely focused on helping achieve the perfect layout, both on the server and the client. We're open to suggestions, but our priorities at the moment lie elsewhere in the library (namely cutting down size across the board and maintaining/improving APIs).