Javascript 什么'；这是React.js中性能最好但功能齐全的样式方法

我已经阅读了很多博客文章、最佳实践和幻灯片（例如克里斯托弗·切多（Christopher Chedeau，又名“vjeux”），我认为这很好）

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

作为一个习惯于使用CSS和最近使用SASS（我仍然喜欢）做很多工作的人，这让我感到有些困惑，因为我不想否认标准CSS给我的任何样式属性

我现在的问题是： 是否有可能将您的造型放在您的反应组件中而不存在这些缺点，如果：您实际如何做到最佳性能和最大清晰度请查看。很酷。下面是一个示例，其中演示了如何添加媒体查询以及其他内容

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

看一看。