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

Question

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

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

Answer 1

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

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

编辑：

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

有一个名为Radium的新兴 React 项目，它提供了 mixin，用于根据活动媒体查询应用条件样式，在MediaQueryList使用MediaQueryList 。

Answer 2

如果没有样式表，您将无法执行媒体查询和伪元素之类的操作。 但是，您可以访问它们在 JavaScript 中构建的信息。 例如，一个 resize 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

您可以通过简单地导入它并使用 StyleRoot 组件来将媒体查询与镭包一起使用。

import Radium, { StyleRoot } from 'radium';

但是请记住，您不能直接在StyleRoot下使用媒体查询

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

Answer 6

在以下方便的步骤中为我工作：

1. 例如，在媒体 css 文件中为您想要的项目设置 class

    @media (max-width: 768px){.sidebar-show{ display: block; }.sidebar-hide{ display: none; }}

2. 反应中的条件渲染，例如：（例如showSideBar是 state 变量）

    <aside className={`col-md-3 ${showSideBar?"sidebar-show":"sidebar-hide"}`}>

Answer 7

好吧，我不知道这是否有资格作为答案，但你可以使用它

<YourComponent style = { window.screen.width < 992 ? {width: "50%"} : {}/>

要么

 <YourComponent style = { window.screen.width > 1200 ? 
                          {width: "100%"} 
                          : window.screen.width > 991 ?
                               {width: "80%"}
                               : window.screen.width > 765 ? {width: "50%"}: {}/>