How CSS-to-JS camelCase Conversion Works
Every hyphenated CSS property name becomes camelCase by removing each hyphen and capitalizing the letter that followed it: background-color becomes backgroundColor, font-size becomes fontSize, border-top-width becomes borderTopWidth. Vendor-prefixed properties follow the same rule but land on a capitalized first letter, matching how React's CSSOM properties are actually named: -webkit-transform becomes WebkitTransform, not webkitTransform, and -moz-appearance becomes MozAppearance. Property values are carried over as strings unchanged, since CSS units (px, rem, %) and keywords aren't valid as bare JavaScript numbers or identifiers.
Three Output Formats
React style object wraps everything in const styles = { ... }, ready to drop directly into a component's style prop. Plain JS object produces just the { ... } object literal on its own, useful when you're assigning it to a different variable name or merging it into an existing object. const variables produces one standalone const declaration per property instead of an object, useful when you want each value as its own named constant rather than a single style bag.
Using the Output in a React style Prop
The React style object format is deliberately shaped to be pasted straight into JSX: <div style={styles}>. Because inline styles in React take camelCase property names and string (or unitless number) values, this is exactly the shape React expects, unlike raw CSS text which uses kebab-case and can't be assigned to style directly.
Common Gotchas
Shorthand properties (margin, border, background) convert their property name normally but keep the full shorthand value as one string, e.g. margin: "8px 16px" rather than being split into margin-top/margin-right/etc; if you need the individual longhand values, they need to be written as separate CSS declarations first. Values are always emitted as quoted strings, including purely numeric-looking ones like line-height: 1.5, since this tool doesn't guess which values React would accept as bare unitless numbers versus which need to stay strings. !important is preserved as literal text inside the value string, but note that inline styles in React don't support !important the way a stylesheet rule does, so it won't have the effect its author may expect.
Inline Styles vs. CSS-in-JS Libraries
This tool solves the one-off conversion problem: pasting an existing block of CSS and getting a usable JS object back. It's not a substitute for a full CSS-in-JS library (styled-components, Emotion, vanilla-extract), which additionally handle pseudo-classes, media queries, nested selectors, and theming; those need their own dedicated syntax rather than a flat property-value object, which is all plain inline styles can express. Use it to convert css to react inline style, applying camelcase css properties automatically, as a css to jsx style object and react style object generator, a css property to camelcase tool, an inline style converter, a css to js object online utility, and a quick way to convert css to react style without hand-editing every property.