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

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

Конвертируйте объявления CSS в объект 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-style-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "conversionDirection": "css-to-js",
    "outputFormat": "react-inline",
    "cssInput": "background-color: #3b82f6;\nfont-size: 16px;\nopac…"
  }'

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

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

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

YOUR_INPUT_HERE

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

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

<iframe
  src="https://iotools.cloud/embed/css-to-js-style-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Конвертер CSS в JS Style — 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 и получите готовый к использованию объект JavaScript style — или сделайте обратное и преобразуйте объект стиля JS обратно в обычный CSS. Этот инструмент нацелен на три способа отображения CSS в современном коде JavaScript UI, каждый с разными правилами для имён свойств и значений:

  • React Inline Style — простой объект с ключами в camelCase (backgroundColor, fontSize) для пропса style. Числовые значения пикселей преобразуются в голые числа, где React автоматически добавляет px (fontSize: 16), в то время как свойства без единиц, такие как opacity и fontWeight, остаются числовыми, потому что сам CSS рассматривает их как без единиц.
  • React Native StyleSheet — то же преобразование camelCase, завёрнутое в StyleSheet.create({ container: { ... } }). Свойства макета (width, margin, padding, borderRadius, fontSize и им подобные) имеют удалённый суффикс px, поскольку измерения React Native по соглашению являются числами без единиц.
  • styled-components / Emotion — помеченный шаблонный литерал (const styles = css`...`;). В отличие от двух других форматов, имена свойств остаются в своём исходном kebab-case и значения копируются дословно — styled-components и Emotion анализируют реальный синтаксис CSS внутри шаблонного литерала, поэтому никакого преобразования camelCase или числового приведения не происходит здесь.

Переключение Направления преобразования на JavaScript → CSS обращает процесс: вставьте объект стиля JS (ключи в кавычках или без кавычек, строковые или числовые значения) и получите обратно стандартные строки CSS property: value;. Числовые значения расширяются обратно в пиксели, если только свойство не является одним из свойств без единиц (opacity, zIndex, flex, lineHeight и т. д.), которые записываются обратно как простые числа.

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

  1. Выберите Направление преобразования — CSS → JavaScript или JavaScript → CSS.
  2. Для CSS → JavaScript выберите Формат вывода: React Inline Style, React Native StyleSheet или styled-components/Emotion.
  3. Вставьте ваши объявления CSS (или объект стиля JS) в поле ввода, либо как свободные строки property: value;, либо завёрнутые в блок selector { ... }.
  4. Вывод обновляется автоматически по мере ввода.

FAQ

Почему font-size: 16px становится fontSize: 16 в React, но остаётся font-size: 16px в styled-components? Пропс style inline React рассматривает голые числа на большинстве свойств как пиксели, поэтому инструмент удаляет px. styled-components и Emotion отображают буквальный текст CSS, поэтому единица должна остаться.

Какие свойства сохраняют свой px в React Native? Только те, для которых React Native ожидает числа: размеры, интервалы (margin*, padding*), смещения позиции, ширины/радиусы границ, fontSize, letterSpacing и свойства gap. Всё остальное берётся в кавычки как строка.

Обрабатывает ли он свойства с префиксами поставщиков? Да — префиксы -webkit-, -moz-, -ms- и -o- преобразуются в их эквиваленты JS (WebkitTransform, MozTransform, msTransform, OTransform) и обратно.

Понимает ли он полные селекторы CSS или вложенные правила? Нет — он читает только объявления, вводятся ли они свободно или завёрнуты в один блок { ... }. Селекторы, медиа-запросы и вложенные правила не анализируются.

Что происходит с пользовательскими свойствами CSS (--my-var)? Объявления, определяющие пользовательское свойство (начинающиеся с --), пропускаются в направлении CSS → JS; использование var(--my-var) как значение сохраняется как есть.

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

Этот инструмент работает полностью в вашем браузере — ваш CSS и JavaScript никогда не покидают ваше устройство и не касаются сервера.

cssjavascriptreactreact-nativestyled-componentsemotioncss-in-jsconverter

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

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

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