Question

我一直在阅读很多博客文章，最佳做法和幻灯片（例如，CSS in JS来自Christopher Chedeau，又名＆＃39; vjeux＆＃39;我觉得这很棒。）

我完全理解为什么它会更好＆＃34;直接在你的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'
      }
    }
  };

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

1 个答案: