如何在 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';
}
}
你可以在 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)").addEventListener('change', handler);
}
render() {
return (
<div >
{this.state.matches && (<h1>Big Screen</h1>)}
{!this.state.matches && (<h3>Small Screen</h3>)}
</div>
);
}
}
export default App;
https://stackblitz.com/edit/react-cu8xqj?file=src/App.js
2021年9月10日编辑：更换addListener与addEventListener作为前者被弃用。感谢 John Galt 通过发表评论让我们知道。
您不能内联设置媒体查询。您需要创建一个单独的 CSS 样式表，然后导入该样式表。
例如，以下代码将放入一个新styles.css文件中。
.heading {
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 组件文件中。
如果您有特殊情况，当您需要在 React 应用程序中获取媒体查询结果时（例如，您想在移动版本中显示某个组件），您可以使用诸如react-responsive或react-media-hook 之类的助手。
如果您习惯使用 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 文件中做你的样式并根据需要导入每个样式。如果您这样做，请不要忘记导出您的样式。
事实证明第二个答案非常有用，但是，它只是类组件中的示例，但是将其应用于功能组件通常很困难或很麻烦，因为有时将功能组件转换为类组件是有问题的, 在这里我使用Hooks离开这个例子
import React, { useState, useEffect } from 'react';
const App = () => {
const [matches, setMatches] = useState(
window.matchMedia("(min-width: 768px)").matches
)
useEffect(() => {
window
.matchMedia("(min-width: 768px)")
.addEventListener('change', e => setMatches( e.matches ));
}, []);
return (
<div >
{matches && (<h1>Big Screen</h1>)}
{!matches && (<h3>Small Screen</h3>)}
</div>
);
}
export default App;