js{}

CSS to JS / Styled Components

Convert CSS to camelCase JS objects or Styled Components

Transform CSS stylesheets into camelCased JavaScript style objects, JSON or Styled Components template literals. Essential for React inline styles, React Native and CSS-in-JS workflows.

CSS

const styles = {
  backgroundColor: '#161b22',
  border: '1px solid #2d333b',
  paddingTop: '12px',
  paddingLeft: '16px',
  borderRadius: '6px',
  fontSize: '14px',
  color: '#e6edf3'
};

// quick guide

Modern React and JavaScript frameworks style elements using CSS-in-JS (such as Styled Components) or inline style objects. This converter translates standard CSS declarations into camelCased JavaScript style objects or Styled Components templates.

How to use this tool:

Paste your CSS code into the input panel.
Choose the desired output format: JS Object (for React style={} props) or Styled Components.
Copy the camelCased JS object or styled-component template literal instantly.

// frequently asked questions

Why does JS style syntax use camelCase?

JavaScript DOM style objects cannot use hyphens (like <code>background-color</code>) because hyphens are interpreted as subtraction operators. Therefore, CSS property names are converted to camelCase (like <code>backgroundColor</code>).

What is Styled Components?

Styled Components is a popular React library that uses tagged template literals to style components with actual CSS code inside your JavaScript files.

Does it convert units like px to numbers?

For React inline style objects, values like <code>margin: 10px</code> are translated as strings (<code>margin: '10px'</code>) or numbers (if the property accepts unitless numbers), ensuring correct JS syntax.