CSS 有許多問題

在 vjeux 的 react css in js 中有提到：

1. 全域的命名空間 (global namespace)
2. 相依性 (dependencies)
3. 沒用到的程式碼 (dead code)
4. 壓縮 (minification)
5. CSS 跟 JS 共用常數 (sharing constants)
6. 不確定性的解析 (non-deterministic resolution)
7. 沒有隔離性 (isolation)

Inline style 則可以改善這些問題

Radium 的功能

1. 延伸一般 inline style 的功能
2. 支援 :hover :focus :active 狀態
3. 支援 Media query
4. Automatic vendor prefixing
5. Keyframes animation helper
6. 支援 ES6 Class 和 React.createClass

開始使用 Radium

這樣裝飾過的 React Component，
就會有 Radium 延伸的功能

Radium 的原理

• 包裝 render 方法，讓他可以接收 array
• 遞迴的處理原本的 render 結果
• 掌管特殊的 state 例如 :hover，並在用 onMouseEnter 等方法來在特定時候呼叫 this.setState

可以使用 array 來作為 style

後面的 style 會蓋掉前面 style 的屬性，
就像 Object.assgin 一樣

Radium 會忽略所有不是 object 的元素

radium 支援 :hover :focus :active
這三個瀏覽器狀態 pseudo-selector

Media queries

使用 Keyframes

有時候程式需要取得現在的狀態

就需要用到 getState 這個方法

Radium.getState(state, elementKey, value):boolean

state：通常會傳入 this.state，不過也有可能會傳入之前的 state

elementKey：如果有多個元素必須傳 key="" 或是 ref="" 的值，如果只有一個元素則可以留空

value：:active :focus :hover 其中一個

return：回傳布林值