javascript-React中的内联CSS样式:如何实现媒体查询?

我非常喜欢React中的内联CSS模式(视频),我正在考虑使用它。 但是我有一个与此类似的问题。

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

Paulo asked 2020-07-30T07:27:25Z
3个解决方案
28 votes

你不能 必须在样式表的声明块中定义某些CSS功能,例如MediaQueryList查询。

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

编辑:

在某些浏览器(Chrome 9 +,IE 10 +,Firefox 6+)中有可用的实验对象,这些对象允许您在文档上的媒体查询更改时添加事件侦听器,例如MediaQueryList。

有一个新生的React项目Radium,它提供了用于在活动媒体查询的基础上应用条件样式的mixin,使用了MediaQueryList

Mark F answered 2020-07-30T07:27:57Z
17 votes

没有样式表,您将无法执行媒体查询和伪元素之类的操作。 但是,您可以访问它们在JavaScript中建立的信息。 例如,调整大小混合的天真的实现:

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压力。 而且您想限制该事件,因为浏览器在拖动窗口时将很快发出该事件。

与所有好的抽象一样,您可以在有空余时间且无需使用其修改组件的情况下进行这些优化。

Brigand answered 2020-07-30T07:28:36Z
6 votes

React-Responsive将让您使用特定的媒体查询用例。

它使您可以使用媒体规范包装反应元素元素。 包装的元素只有在符合媒体规范的情况下才会呈现。 这不是通用解决方案,因为它不允许您添加任意的CSS属性。

Kat answered 2020-07-30T07:29:01Z
translate from https://stackoverflow.com:/questions/28405444/inline-css-styles-in-react-how-to-implement-media-queries