Question

如何在Reactjs中执行以下CSS媒体查询？

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

我尝试了以下操作，但是它引发了语法错误并且无法编译。

heading: {
  textAlign: 'right',
  @media (maxWidth: '767px') {
    textAlign: 'center';
  }
  @media (maxWidth: '400px') {
    textAlign: 'left';
  }
}

Answer 1

如果你习惯使用 css，你可以使用 styled-components。它看起来像这样。

import React from 'react';
import Styled from "styled-components";

function YourComponent() {

    const heading = Styled.h1`
        Text-align:right;

            @media (max-width: 767px) {
                text-align: center;
            }
            @media (max-width: 400px) {
                text-align: left;
            }
    `;

   return(
        <>
           <heading>This is my heading</heading>
        </>
    )
}

如果你有很多样式需要做，你可以在另一个 js 文件中做你的样式，并根据需要导入每个样式。如果您这样做，请不要忘记导出您的样式。

Answer 2

您不能内联设置媒体查询。您将需要创建一个单独的CSS样式表，然后导入该样式表。

所以下面会去在一个新的styles.css文件例如

  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

然后，您可以将新的CSS样式文件导入到react文件中。因此，您可以将import './styles.css'添加到App.jsx文件的顶部（假设它们都在根级别），或者可以将其直接导入到特定的React组件文件中。

Answer 3

如果有特殊情况，当您需要在应用程序内部获取媒体查询结果时（例如，您想要在移动版本中显示某些组件），可以使用react-responsive或{{ 3}}

Answer 4

您可以在React内部进行媒体查询：

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { matches: window.matchMedia("(min-width: 768px)").matches };
  }

  componentDidMount() {
    const handler = e => this.setState({matches: e.matches});
    window.matchMedia("(min-width: 768px)").addListener(handler);
  }
  render() {
    return (
      <div >
      {this.state.matches && (<h1>Big Screen</h1>)}
      {!this.state.matches && (<h3>Small Screen</h3>)}
      </div>
    );
  }
}

export default App;

https://repl.it/repls/MemorableThoseLevels

Answer 5

就我而言，我使用自定义钩子为我生成一些断点值：

import { useMediaQuery } from 'react-responsive';

export const useBreakpoints = () => {
  const isMobileSmall = useMediaQuery({ query: '(max-width: 325px)' });
  const isMobileMid = useMediaQuery({ query: '(max-width: 375px)' });
  const isMobileFloor = useMediaQuery({ query: '(max-width: 425px)' });

  const isTabletFloor = useMediaQuery({ query: '(max-width: 426px)' });
  const isTabletMid = useMediaQuery({ query: '(max-width: 768px)' });
  const isTabletCeil = useMediaQuery({ query: '(max-width: 1024px)' });

  const isLaptopFloor = useMediaQuery({ query: '(max-width: 1025px)' });
  const isLaptopCeil = useMediaQuery({ query: '(max-width: 1440px)' });

  const isXHDFloor = useMediaQuery({ query: '(max-width: 1441px)' });
  const isXHDCeil = useMediaQuery({ query: '(max-width: 4096px)' });

  return {
    isMobileSmall,
    isMobileMid,
    isMobileFloor,
    isTabletFloor,
    isTabletMid,
    isTabletCeil,
    isLaptopFloor,
    isLaptopCeil,
    isXHDFloor,
    isXHDCeil,
  };
};

并且我在我的 useMemo 组件中调用它，这是不正确的 :)

所以我把它放在 useMemo 之外，它很有魅力！

基本上我想指出的是避免使用嵌套的钩子调用！

Answer 6

aphrodite 可以提供帮助。

这是一个example：

import React from "react";
import { StyleSheet, css } from "aphrodite";

import "./style.css";

const styles = StyleSheet.create({
  heading: {
    textAlign: "right",
    backgroundColor: "red",
    "@media (max-width: 767px)": {
      textAlign: "center",
      backgroundColor: "green"
    },
    "@media (max-width: 767px)": {
      textAlign: "center",
      backgroundColor: "blue"
    }
  }
});

export default function App() {
  return (
    <div className={css(styles.heading)}>
      <h1>Hello aphrodite!</h1>
    </div>
  );
}

Answer 7

reactjs 项目中另一种编写媒体查询的方式：

style.js 文件：

import sys
from functools import cached_property

from PyQt6.QtCore import QRect, Qt
from PyQt6.QtGui import QAction
from PyQt6.QtWidgets import (
    QApplication,
    QGridLayout,
    QLineEdit,
    QMainWindow,
    QMenu,
    QMenuBar,
    QPushButton,
    QStackedWidget,
    QVBoxLayout,
    QWidget,
)


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Try")

        central_widget = QWidget()
        self.setCentralWidget(central_widget)

        lay = QVBoxLayout(central_widget)
        lay.addWidget(self.lineedit)

        lay.addWidget(self.stacked_widget, alignment=Qt.AlignmentFlag.AlignCenter)

        maps = [
            {"A": (0, 0), "B": (0, 1), "C": (1, 0), "D": (1, 1)},  # first page
            {"E": (0, 0), "F": (0, 1), "G": (1, 0), "H": (1, 1)},  # second page
        ]

        for m in maps:
            page = self.create_page(m)
            self.stacked_widget.addWidget(page)

    @cached_property
    def stacked_widget(self):
        return QStackedWidget()

    @cached_property
    def lineedit(self):
        le = QLineEdit()
        le.setFixedHeight(35)
        return le

    def create_page(self, map_letters):
        page = QWidget()
        grid_layout = QGridLayout(page)
        for name, pos in map_letters.items():
            button = QPushButton(name)
            button.setFixedSize(20, 20)
            grid_layout.addWidget(button, *pos)
        return page


class Menu:
    def __init__(self, MainWindow):
        super().__init__()
        self.view = MainWindow
        self.menuBar = QMenuBar()
        self.menuBar.setGeometry(QRect(0, 0, 277, 22))
        self.view.setMenuBar(self.menuBar)
        self.open = QMenu(self.menuBar)
        self.open.setTitle("Open")
        self.menuBar.addAction(self.open.menuAction())
        self.this = QAction(self.menuBar)
        self.this.setText("This")
        self.this.setCheckable(True)
        self.open.addAction(self.this)

        self.this.triggered.connect(self.show_new_window)

    def show_new_window(self, checked):
        self.view.stacked_widget.setCurrentIndex(1 if checked else 0)


def main():
    app = QApplication(sys.argv)
    w = MainWindow()
    m = Menu(w)
    w.show()
    app.exec()


if __name__ == "__main__":
    main()

style.css 文件：

root: {
 background: "white",

 "@media (max-width: 1920px)": {
   background: "red",
 }
}

谢谢

Answer 8

还有一种通过使用布尔值（例如ex）来包含媒体查询的方法。

<div style={{window.innerWidth > 768 ? '800px' : '400px'}}/>

这很好地解决了问题

Answer 9

结果证明第二个答案非常有用，但是，它只是类组件中的示例，但是将其应用于功能组件通常很困难或很麻烦，因为有时将功能组件转换为一类，这里我使用 Hooks

离开这个例子

媒体查询语法Reactjs

9 个答案: