User Rating 0.0 ★★★★★

Total Usage 0 times

Category CSS Tools

CSS Input Paste raw CSS declarations, with or without braces and selectors.

Options Convert px to numbers Strip !important Single quotes in output

Output Format JS Object JSX style={{}} fromCSS() call

React Style Output

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

React components use JavaScript objects for inline styles, not CSS strings. Every hyphenated CSS property must become camelCase (background-color → backgroundColor), every numeric pixel value should drop its unit suffix to become a raw Number, and vendor prefixes follow browser-specific capitalization rules (-webkit-transform → WebkitTransform, but -ms-transform → msTransform). Getting any of these wrong produces silent failures: the property is simply ignored by the browser at runtime with zero error feedback. This converter parses raw CSS declarations, strips comments, handles shorthand properties, converts units, and outputs a copy-paste-ready React style object or JSX spread.

The parser handles edge cases that manual conversion misses: content property strings stay quoted, unitless properties like line-height, opacity, and z-index remain numbers, and !important annotations are stripped because React's style API does not support them. This tool approximates the behavior of the react-css npm package's fromCSS function entirely client-side with no dependencies.

Formulas

The conversion pipeline applies three sequential transformations to each CSS declaration:

propertyTransform: kebab-case → camelCase

Split on - delimiter. For each segment s_i where i > 0, capitalize first character. Exception: vendor prefix -ms- keeps lowercase ms; all other prefixes (-webkit-, -moz-, -o-) capitalize the prefix letter.

valueTransform: string → number | string

If value matches pattern vpx and property is not in the unitless set, extract numeric v. If value is purely numeric and property is in the unitless set {zIndex, opacity, fontWeight, flex, order, lineHeight, …}, return Number(v). Otherwise return trimmed string.

sanitize: Strip !important annotations, remove CSS comments (/* … */), normalize whitespace.

Where property is the CSS declaration name and value is the declaration value after the colon. The output object maps propertyTransform(property) → valueTransform(value).

Reference Data

CSS Property	React Property	Value Handling
background-color	backgroundColor	String (color value)
font-size	fontSize	Number if px, String otherwise
margin-top	marginTop	Number if px
z-index	zIndex	Number (unitless)
opacity	opacity	Number (unitless)
line-height	lineHeight	Number if unitless, String if unit
-webkit-transform	WebkitTransform	String
-moz-appearance	MozAppearance	String
-ms-transform	msTransform	String (lowercase ms)
-o-transition	OTransition	String
content	content	String (preserves quotes)
flex	flex	Number if single value, String if shorthand
border	border	String (shorthand preserved)
font-weight	fontWeight	Number if numeric (400, 700)
animation-delay	animationDelay	String (time unit preserved)
box-shadow	boxShadow	String (complex value)
background-image	backgroundImage	String (url() preserved)
grid-template-columns	gridTemplateColumns	String
padding	padding	Number if single px, String if multi
border-radius	borderRadius	Number if single px, String if multi
transition	transition	String (complex value)

Frequently Asked Questions

JavaScript object keys containing hyphens require bracket notation (obj['font-size']). React's style API uses the DOM element.style interface, which already maps CSS properties to camelCase (element.style.fontSize). Using camelCase aligns with the native DOM API and allows dot notation access.

React automatically appends "px" to numeric values for properties that accept pixel units. Writing fontSize: 16 is equivalent to fontSize: "16px". This reduces string allocation and is the idiomatic React convention. Properties in the unitless set (opacity, zIndex, lineHeight, fontWeight, flex, order, etc.) are already numeric and receive no suffix.

The DOM API treats the Microsoft prefix as a special case. In element.style, -webkit-transform maps to WebkitTransform (capital W), but -ms-transform maps to msTransform (lowercase m). This is a browser legacy inconsistency. The converter follows this rule: -webkit-, -moz-, and -o- prefixes capitalize the first letter; -ms- does not.

React's inline style API does not support !important. There is no mechanism in the style object to set priority. The converter strips !important annotations and emits a warning. If you require !important, use CSS modules, styled-components, or a global stylesheet instead of inline styles.

The converter extracts only declarations (property: value pairs). Selectors, at-rules (@media, @keyframes), and pseudo-classes (:hover, ::before) are ignored because React inline styles cannot represent them. The parser strips selectors and braces, processing only the declaration block content. For pseudo-classes and media queries, use CSS-in-JS libraries or separate stylesheets.

Shorthand properties with multiple values are preserved as strings because no single numeric value applies. margin: 10px becomes margin: 10 (number), but margin: 10px 20px becomes margin: "10px 20px" (string). React passes shorthand strings directly to the DOM. For granular control, expand shorthands into marginTop, marginRight, marginBottom, marginLeft.

CSS custom properties like --my-color: #fff are preserved as-is. The property name is not camelCase-converted because React supports custom properties through the style object using the original double-dash syntax. The converter outputs them with the key "--my-color" (string key) in the object literal.