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%"}: {}/>