Importing CSS in React Server Components
Hydrogen collects styles for each CSS file imported in your client and server components.
Modify modes for CSS supportAnchor link to section titled "Modify modes for CSS support"
You can modify the following modes for CSS support by passing
experimental.css option to the Hydrogen plugin in
modules-only: Enables limited support for CSS Modules only. This is the current default mode.
global: Enables full support for vanilla CSS and CSS Modules.
globalalso enables a way to integrate with tools that provide CSS-in-JS at build time. This is the recommended mode.
Import Vanilla (pure) CSS and extensionsAnchor link to section titled "Import Vanilla (pure) CSS and extensions"
Once enabled, you can import your stylesheets directly in your server components:
Import CSS ModulesAnchor link to section titled "Import CSS Modules"
Hydrogen collects styles for each CSS Module in your components. CSS Modules can be imported in both client and server components.
When the CSS mode is
modules-only, styles are inlined in a
<style> tag before your component. This tag is only added automatically for the default export in the file. Consider using the
global CSS mode to support named exports and reduce code duplication.
CSS-in-JS librariesAnchor link to section titled "CSS-in-JS libraries"
Hydrogen supports CSS-in-JS libraries that emit
.css files at build time using third-party Vite plugins. Please reach out to the library maintainers to ask for React Server Components support, and feel free to tag the Hydrogen team (
However, CSS-in-JS libraries that collect styles at runtime aren't currently supported due to limitation integrating these libraries with React Server Components.
- Explore an example implementation of CSS Modules in GitHub.