Bug: Inconsistent styles between client-side and server-side routing

[denk0403]

React version: 18.2.0

This may be verging into undefined behavior, but there seems to be a slight discrepancy when it comes to applying ill-formed CSS styles to a React element. For instance, say we had the following JSX:

<div style={{ backgroundColor: "orange; font-size: 40px;", color: "blue" }}>Hello World</div>

When the JSX is server rendered, it produces mostly the "expected" HTML:

<div style="background-color:orange; font-size: 40px;;color:blue">Hello World</div>

However, when the JSX is rendered from client-side routing, it strips the ill-formed style from the HTML and reports a warning in the console:

<div style="color: blue;">Hello World</div>

Warning: Style property values shouldn't contain a semicolon. Try "backgroundColor: orange; font-size: 40px" instead.
    at div

While ultimately the problem is with the style definition, it seems like React should be more consistent with how it handles bad styles. I would expect either that the styles are present in both types of routing, or stripped and warned about in both types of routing.

Steps To Reproduce

The steps below are in a Next.js project, but I have been able to reproduce this in Remix as well.

1. Press on "Go to Test".
2. Observe that the button text is blue, but the rest of the styles are the defaults.
3. Click the button to refresh the page.
4. Observe that the button now has an orange background and larger font size.

Link to code example: https://codesandbox.io/p/devbox/styles-bug-3kxt2g

Client-side routing	Server-side routing

[denk0403]

The styles have an error, you seem to combine inline styles from jsx and html

This issue is specifically about ill-formed inline styles, i.e. the error in the example is intentional.

For context, this was discovered because we have some inline styles which are dynamic, and so the faulty value wasn't noticed until we performed a client-side navigation to the page with the faulty value. Upon a fresh reload of the page, the styling looks correct and there is no warning in the console, which is misleading.

My suggestion is to make the behavior consistent between client-side and server-side routing.

[ksachin7]

This issue is specifically about ill-formed inline styles, i.e. the error in the example is intentional.

Yeah, The issue was with inline style which was not correct. Corrected: style={{ backgroundColor: "orange", fontSize: "40px", color: "blue" }} this and behaviour is now consistent.

[denk0403]

Yeah, The issue was with inline style which was not correct. Corrected: style={{ backgroundColor: "orange", fontSize: "40px", color: "blue" }} this and behaviour is now consistent.

As mentioned before, the mistake in the example is intentional; this bug report is not about looking for a fix for my code. It's about React rendering and warning about ill-formed styles inconsistently between the server and the client.

[punkpeye]

I wonder if I am running into the same issue.

I am seeing a lot of errors like:

<div
  className="filter_blur(1px) trs_background-color_1s_ease-in-out"
  onMouseEnter={function onMouseEnter}
+ style={{backgroundColor:"#0e1f1d"}}
- style={{}}
>
<div>

[punkpeye]

The underlying code is:

style={{
  backgroundColor: grid[i][k] ? '#0e1f1d' : undefined,
}}

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[denk0403]

This issue still exists in React 19: https://codesandbox.io/p/devbox/styles-bug-v19-mfw2ct

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!