fix(ssr): support Box styled-system CSS in server rendering

[simonguo]

Summary

Fix SSR support for Box and other styled-system based components so that their CSS is correctly generated during server-side rendering.

Changes

• Add useSSRStyles hook for SSR style collection:
  • Creates a StyleCollector during SSR
  • Registers the collector on StyleManager
  • Generates a <style data-rs-style-manager ...> element with collected rules
• Integrate useSSRStyles into CustomProvider:
  • Use user-provided styleCollector if present, otherwise use the auto-created one
  • Automatically inject styleElement into the provider tree

Motivation

Previously, Box’s CSS was only injected on the client via StyleManager and did not support server-side style collection. This caused missing styles in SSR HTML and potential hydration issues.

This change makes SSR output include the correct CSS while keeping client behavior unchanged.

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rsuite-main	Ready	Preview	Comment	Dec 11, 2025 10:29am
rsuite-storybook	Ready	Preview	Comment	Dec 11, 2025 10:29am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
rsuite-v5	Ignored	Preview		Dec 11, 2025 10:29am

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov[bot]]

Codecov Report

:x: Patch coverage is 98.13084% with 2 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 94.41%. Comparing base (0832f36) to head (0e1b136). :warning: Report is 12 commits behind head on main.

Files with missing lines	Patch %	Lines
src/internals/hooks/useSSRStyles.tsx	96.15%	1 Missing :warning:
src/internals/styled-system/style-manager.ts	90.90%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4456      +/-   ##
==========================================
- Coverage   94.47%   94.41%   -0.06%     
==========================================
  Files         559      563       +4     
  Lines       13740    13969     +229     
  Branches     4081     4141      +60     
==========================================
+ Hits        12981    13189     +208     
- Misses        687      703      +16     
- Partials       72       77       +5     

Flag	Coverage Δ
chromium	94.41% <98.13%> (-0.06%)	:arrow_down:
firefox	94.40% <98.13%> (-0.07%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

@simonguo I've opened a new pull request, #4459, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

@simonguo I've opened a new pull request, #4460, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

@simonguo I've opened a new pull request, #4461, to work on those changes. Once the pull request is ready, I'll request review from you.