CSS Property to camelCase Converter

Convertissez les propriétés CSS avec tirets en noms JavaScript pour les objets style du DOM et React. Les préfixes vendeur, float et les custom properties suivent des règles CSS spécifiques.

Propriété DOM style

backgroundColor
element.style.backgroundColor = value

Clé React style

backgroundColor
style={{ backgroundColor: value }}

Les propriétés CSS standard avec tirets utilisent généralement le même nom camelCase dans les objets style du DOM et dans React.

La conversion s’exécute localement dans votre navigateur.

Règles de conversion propres au CSS

Le convertisseur suit les conventions de CSSOM et des objets style React au lieu de traiter chaque propriété comme un simple kebab-case.

  • Les noms standard comme background-color deviennent backgroundColor.
  • Les custom properties comme --brand-color restent inchangées au lieu de devenir brandColor.
  • float devient cssFloat dans les objets style du DOM, tandis que React utilise float.
  • Les préfixes vendeur respectent la casse attendue, par exemple webkitLineClamp dans le DOM et WebkitLineClamp dans React.

Traduisez les noms de feuille de style lorsque vous utilisez element.style ou CSSStyleProperties.

Préparez les clés de style inline React sans renommer par erreur les custom properties CSS.