Перейти к основному содержанию
iotools.cloudiotools.cloud

Конвертер CSS в JS

Преобразуйте объявления CSS в объект стиля JS (React inline style, React Native StyleSheet, styled-components, Emotion или простой объект) — и наоборот из JS в CSS.

Ввод

Вывод

Вывод
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "direction": "css-to-js",
    "cssInput": ".container {\n  display: flex;\n  background-color…",
    "outputFormat": "react"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-to-js-converter` tool (CSS to JS Converter) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-to-js-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Конвертер CSS в JS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Что делает этот инструмент

Библиотеки CSS-in-JS и React не принимают обычный синтаксис CSS — они хотят объект JavaScript, где свойства написаны в camelCase, а значения (в основном) заключены в кавычки. Этот инструмент преобразует объявления CSS, которые у вас уже есть — скопированные из таблицы стилей, экспорта инструмента дизайна или написанные вручную — в форму этого объекта, и может также преобразовывать в другую сторону: вставьте объект стиля JS и получите обычный CSS обратно.

Поддерживает пять форматов вывода CSS-в-JS:

  • React Inline Style — простой объект const styles = { ... }, готовый для style={styles}.
  • React Native StyleSheet — заключенный в StyleSheet.create({ container: { ... } }), с удаленными единицами px в простые числа (React Native не имеет строк единиц).
  • styled-components — помеченный шаблонный литерал (styled.div\...``), который сохраняет ваш исходный CSS в kebab-case, поскольку styled-components принимает реальный синтаксис CSS.
  • Emotion css Prop — та же форма объекта camelCase, что и React, заключенная в css({ ... }).
  • Простой объект JS — просто литерал объекта без окружающего объявления переменной, для вставки в ваш собственный код.

Как использовать

  1. Выберите Направление: "CSS в JS" (по умолчанию) или "JS в CSS".
  2. Вставьте ваши объявления CSS (полный блок правила, такой как .card { ... }, или строки с простыми property: value; — оба варианта работают) — или для JS в CSS вставьте объект стиля JS.
  3. Для CSS в JS выберите Формат вывода из пяти вариантов выше.
  4. Преобразованный код появляется мгновенно в поле вывода. Скопируйте его или загрузите как styles.js.

Детали преобразования

  • Имена свойств преобразуются из kebab-case в camelCase (background-color → backgroundColor) и обратно.
  • Свойства с префиксом поставщика следуют соглашению React: -webkit-transform → WebkitTransform, -ms-overflow-style → msOverflowStyle (строчное ms, в отличие от других префиксов).
  • Пользовательские свойства CSS (--my-color) остаются без изменений и заключены в кавычки как ключи объекта.
  • Простые числовые значения (z-index: 10, line-height: 1.5) становятся числами JS без кавычек; все остальное становится строкой в одинарных кавычках. React Native также преобразует значения px, такие как padding: 16px, в простое число 16.
  • Порядок объявлений в вашем вводе сохраняется в выводе.

FAQ

Обрабатывает ли она полное правило CSS или только простые объявления? Оба. Вставьте полное правило (.container { display: flex; ... }) и селектор будет автоматически удален, или вставьте только объявления, разделенные точками с запятой, самостоятельно.

Что производит "JS в CSS"? Один блок .selector { ... } с ключами camelCase, преобразованными обратно в kebab-case. Значения копируются как есть, так как инструмент не может знать, какую единицу было предназначено иметь простое число.

Почему выход styled-components выглядит иначе, чем другие форматы? Помеченный шаблонный литерал styled-components принимает реальный синтаксис CSS, поэтому этот формат сохраняет ваши исходные имена и значения свойств буквально, а не преобразует их в объект JS.

Будет ли она проверять мой CSS или синтаксис JS? Нет — это легкий парсер, а не полный парсер CSS/JS. Неправильный ввод парсится с максимальным усилием; если ничего полезного не найдено, выход объясняет это вместо молчаливого отказа.

Конфиденциальность

Все преобразование происходит локально в вашем браузере. Ничего из того, что вы вставляете, не загружается и не хранится.

cssjavascriptreactreact nativestyled-componentsemotionconverterdeveloper

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу