React.js 中性能最高但功能最全的样式方法是什么

Question

我一直在阅读很多博客文章、最佳实践和幻灯片（例如，Christopher Chedeau 又名“vjeux”的CSS in JS，我认为这很棒）。

我完全理解为什么直接在 React 组件中设置样式“更好”，但后来我发现这也可能是有限的。您可能不使用 CSS 伪类或媒体查询来处理一些响应式样式问题。

作为一个习惯于使用 CSS 和最近使用 SASS（我仍然喜欢它）做大量工作的人，这让我陷入了某种分裂，因为我不想否认标准 CSS 给我的任何样式属性.

我现在的问题是： 是否有可能让你的样式在你的 React 组件中 没有那些给定的缺点，如果：你将如何实际做到这一点来实现 最佳性能和最大清晰度。

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'
      }
    }
  };