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

Question

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

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

作为一个习惯用 CSS 和最近用 SASS（我仍然喜欢）做很多工作的人，这让我产生了某种乳沟，因为我不想否认标准 CSS 给我的任何样式属性。

我现在的问题是： 是否有可能在你的 React Components 中使用你的样式而没有那些给定的缺点，如果：如何你真的会这样做以获得最佳性能和最大清晰度。

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

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

What's the most performant but full-featured styling method in React.js

javascript

css

performance

reactjs