요소 노드에서의 인라인 CSS

인라인 CSS를 React 노드에 적용하기 위해서는 style이라는 속성/prop을 CSS 속성과 값을 가진 오브젝트와 함께 전달해야 합니다.

예를 들어, 아래의 코드는 CSS 속성과 값을 담고 있는 오브젝트를 참조(예: inlineStyle)하는 style prop를 전달하고 있습니다.

var inlineStyles = {backgroundColor: 'red', fontSize: 20};

var reactNodeLi =  React.createElement('div',{style: inlineStyles}, 'styled')

ReactDOM.render(reactNodeLi, document.getElementById('app1'));

결과로 나온 HTML은 아래와 같습니다:

<div id="app1">
  <div style="background-color: red;font-size: 20px;" data-reactid=".0">styled</div>
</div>

위의 JavaScript 코드에서 2가지 부분을 자세히 보시기 바랍니다.

1. fontSize값에 "px"를 덧붙이지 않아도 됩니다. React가 대신 해주기 때문이죠.
2. JavaScript에서 CSS 속성을 적을 때는, CSS 속성의 카멜 케이스 버전을 사용해야 합니다. (예: background-color가 아닌 backgroundColor를 사용해야 합니다.)

메모

• ms를 제외한 벤더 접두사는 대문자로 시작해야 합니다. 그렇기 때문에 WebkitTransition이 대문자 "W"로 시작합니다.
• 카멜 케이스의 CSS 속성은 당연히 지켜져야 합니다. 왜냐하면 JS에서 DOM 노드의 속성(예: document.body.style.backgroundImage)에 접근하는 방법이기 때문이죠.
• 픽셀값을 특정하는 경우에, React는 입력된 숫자값 뒤에 자동으로 문자열 "px"를 붙여줍니다. 아래와 같은 속성을 제외하고 말이죠.

columnCount fillOpacity flex flexGrow flexShrink fontWeight 
lineClamp lineHeight opacity order orphans strokeOpacity 
widows zIndex zoom