DOM style 속성
backgroundColorelement.style.backgroundColor = valueCSS Property to camelCase Converter
하이픈으로 구분된 CSS 속성명을 DOM style object와 React에서 사용하는 JavaScript 이름으로 변환합니다. vendor prefix, float, custom property는 일반적인 kebab-case가 아닌 CSS 전용 규칙으로 처리합니다.
React style 키
backgroundColorstyle={{ backgroundColor: value }}일반적인 하이픈 CSS 속성명은 DOM style object와 React style prop에서 같은 camelCase 이름을 사용합니다.
변환은 브라우저 안에서 로컬로 실행됩니다.
CSS 전용 변환 규칙
모든 속성을 단순한 kebab-case로 처리하지 않고 CSSOM과 React style object의 명명 규칙을 따릅니다.
- background-color 같은 표준 속성명은 backgroundColor가 됩니다.
- --brand-color 같은 custom property는 brandColor로 바꾸지 않고 그대로 유지합니다.
- CSS float는 DOM style object에서는 cssFloat, React에서는 float로 사용합니다.
- vendor prefix는 DOM의 webkitLineClamp와 React의 WebkitLineClamp처럼 환경에 맞는 대소문자를 사용합니다.
element.style을 읽거나 쓸 때 스타일시트 속성명을 JavaScript 이름으로 변환합니다.
CSS custom property를 잘못 바꾸지 않고 React inline style용 속성명을 준비합니다.