StyleX

StyleX is a styling system for React from Meta. It compiles styles at build time into atomic CSS classes.

You define styles with a JavaScript API, and the compiler outputs atomic CSS classes that can be shared across components. Styles merge and override each other in a predictable way, so a component can accept a style from its parent without conflicts. The site includes a playground where you can try style definitions and see the output, along with documentation for the API and guides on thinking in the system. Because the work happens at build time, the browser receives only the CSS it needs.

• Style definitions written in JavaScript
• Build time compiled atomic CSS
• Playground for trying styles
• Predictable style merging and overrides
• Documented API and guides

Large React teams that want a styling system used at scale. Developers who want typed style definitions and are willing to add a build step will find it a good fit for shared component libraries.

StyleX is open source under the MIT license, so it is free to use. It needs a build step with a compiler plugin, so set it up in your bundler before writing styles.