CSS转JavaScript样式对象转换器
指导
CSS转JavaScript样式对象转换器
Convert CSS declarations to JavaScript style objects instantly, or reverse the process to go from JS back to CSS. Supports five output formats including React inline styles, React Native StyleSheet, styled-components, Emotion, and plain JS objects. Handles vendor prefixes, CSS variables, numeric value detection, and full CSS rule blocks with selector stripping — all client-side in your browser.
如何使用
Paste your CSS declarations into the input area and select your target output format. The converter automatically transforms property names to camelCase, handles vendor prefixes, and formats values appropriately for your chosen target. Switch to JS-to-CSS mode to convert JavaScript style objects back to standard CSS. Copy the result to your clipboard in one click.
特征
- 双向转换 – Convert CSS to JS style objects or JS objects back to CSS
- 5 Output Formats – React inline styles, React Native StyleSheet, styled-components, Emotion css prop, and plain JavaScript objects
- Vendor Prefix Handling – Correctly converts
-webkit-transform到WebkitTransform,-moz-appearance到MozAppearance, and other vendor-prefixed properties - Smart Numeric Values – Keeps unitless numbers as integers (
margin: 0stays0), strips px units for React Native, preserves string values with units for React - CSS Variable Support – Handles custom properties (
--custom-prop) andvar()references - Selector Stripping – Paste full CSS rule blocks and the converter extracts just the declarations
- Syntax Highlighting – Color-coded output for both CSS and JavaScript with copy to clipboard
常问问题
-
Why do CSS properties need to be camelCased in JavaScript?
JavaScript object keys cannot contain hyphens as bare identifiers. A property like background-color would be interpreted as background minus color. The convention in React and other JS frameworks is to use camelCase equivalents: backgroundColor, fontSize, borderRadius. This converter handles the transformation automatically, including the special capitalization rules for vendor prefixes.
-
What is the difference between React and React Native style handling?
React inline styles use camelCase properties with string values that include CSS units, so font-size: 16px becomes fontSize: '16px'. React Native uses a StyleSheet API where pixel values are plain numbers without units, so the same property becomes fontSize: 16. React Native also does not support all CSS properties, particularly shorthand properties like margin with multiple values.
-
How are vendor prefixes converted to JavaScript?
Vendor prefixes follow a specific capitalization rule in JavaScript. The prefix loses its leading hyphen and gets capitalized: -webkit-transform becomes WebkitTransform, -moz-appearance becomes MozAppearance, and -ms-grid-columns becomes msGridColumns. Note that the ms prefix is lowercase by convention while webkit, moz, and o are capitalized.
-
Can I convert styled-components or Emotion CSS back to plain CSS?
Yes. When using JS-to-CSS mode, paste a JavaScript style object and the converter will transform camelCase properties back to hyphenated CSS properties, unwrap string values, and format the output as standard CSS declarations. This works regardless of which JS framework the original styles were written for, since they all use the same camelCase convention.
