Question

我非常喜欢React中的inline CSS pattern（video），我正在考虑使用它。但是我有一个类似于this one的问题。

如何使用React的内联CSS模式为应用程序实现媒体查询。

Answer 1

你不能。某些CSS功能（例如@media查询）必须在样式表的declaration block中定义。

虽然内联CSS非常适合可以应用于键值对的大多数样式属性，但它并不是专用样式表的完全替代品。

编辑：

某些浏览器（Chrome 9 +，IE 10 +，Firefox 6+）中提供的实验对象允许您在文档的媒体查询发生更改时添加事件侦听器，例如MediaQueryList。

有一个名为Radium的新生React项目提供了基于活动媒体查询应用条件样式的混合，使用了MediaQueryList。

Answer 2

如果没有样式表，您无法执行媒体查询和伪元素等操作。但是，您可以访问JavaScript中构建的信息。例如，调整大小mixin的简单实现：

var ResizeMixin = {
    componentDidMount: function(){
        window.addEventListener('resize', this._resize_mixin_callback);
    },
    _resize_mixin_callback: function(){
        this.setState({
            viewport: {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        });
    },
    componentWillUnmount: function(){
        window.removeEventListener('resize', this._resize_mixin_callback);
    }
};

然后，您可以将其包含在组件中，并具有如下所示的渲染：

render: function(){
  var style;

  if (this.state.viewport.width > 900) {
    style = {width: '45%', margin: '2.5%'};
  }
  else {
    style = {width: '100%', margin: '0'};
  }
  ...
}

我不确定这是个好主意，但可以做到。

通过'天真实施'，我的意思是它存在性能问题。 addEventListener实际上很重，所以你想把它包装在一个简单的js事件发射器中。您还可以只有一个视口对象实例来节省一些GC压力。并且您希望限制事件，因为浏览器在拖动窗口时会非常快速地发出它。

与所有良好的抽象一样，您可以在闲暇时进行这些优化，而无需使用它来修改组件。

Answer 3

React-Responsive会让您使用某种媒体查询用例。

它允许您使用介质规格包装反应元素元素。仅当满足媒体规范时，才会呈现包装元素。它不是一个通用的解决方案，因为它不会让你添加任意的css属性。

Answer 4

我来晚了，但是我仍然希望我能帮上忙。您可以使用“ useMediaQuery”挂钩（https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/src/useMediaQuery.js），如果挂钩返回true，则可以动态应用内联样式。

Answer 5

您可以将媒体查询与radium软件包一起使用，只需将其导入并使用StyleRoot组件即可。

import Radium, { StyleRoot } from 'radium';

但是请记住，您不能直接在 StyleRoot

下使用媒体查询

，您必须将 StyleRoot 的内容放在单独的组件上

React中的内联CSS样式：如何实现媒体查询？

5 个答案: