什麼是React.js中性能最高但功能齊全的造型方法

Question

我一直在閱讀很多博客文章，最佳實踐和幻燈片（例如Christopher Chedeau aka'vjeux'的CSS in JS，我認爲這很棒）。

我完全理解爲什麼在您的React組件中直接設置樣式是「更好的」，但我發現這也可能受到限制。您可能不使用 CSS 僞類也不媒體查詢來處理一些響應式樣式問題。

作爲一個曾經使用CSS進行大量工作並且最近使用SASS（我仍然喜歡）的人，這使我陷入了某種乳溝，因爲我不想拒絕標準CSS給出的任何樣式屬性我。現在

我的問題是： 是否有可能你反應的組分中有你的風格沒有那些給缺點，如果：你如何真正做到這一點，實現最佳性能和最大清晰度。

Answer 1

結賬https://github.com/FormidableLabs/radium。它太酷了。這裏有一個例子，他們展示瞭如何在其他方面添加媒體查詢。

var styles = { 
    base: { 
     backgroundColor: '#0074d9', 
     border: 0, 
     borderRadius: '0.3em', 
     color: '#fff', 
     cursor: 'pointer', 
     fontSize: 16, 
     outline: 'none', 
     padding: '0.4em 1em', 

     ':hover': { 
     backgroundColor: '#0088FF' 
     }, 

     ':focus': { 
     backgroundColor: '#0088FF' 
     }, 

     ':active': { 
     backgroundColor: '#005299', 
     transform: 'translateY(2px)', 
     }, 
     // Media queries must start with @media, and follow the same syntax as CSS 
     '@media (min-width: 992px)': { 
     padding: '0.6em 1.2em' 
     }, 

     '@media (min-width: 1200px)': { 
     padding: '0.8em 1.5em', 

     // Media queries can also have nested :hover, :focus, or :active states 
     ':hover': { 
      backgroundColor: '#329FFF' 
     } 
     } 
    }, 
    red: { 
     backgroundColor: '#d90000', 

     ':hover': { 
     backgroundColor: '#FF0000' 
     }, 

     ':focus': { 
     backgroundColor: '#FF0000' 
     }, 

     ':active': { 
     backgroundColor: '#990000' 
     } 
    } 
    };