React中能否通过JavaScript添加@media CSS属性？

直接通过元素的style属性（比如你示例里用ref.current.style操作的方式）无法添加@media规则，因为内联样式仅支持单个元素的CSS属性，不支持媒体查询这类样式表级别的规则。不过可以通过以下两种方式实现类似需求：

方法一：动态创建样式表并插入@media规则 #

你可以通过JavaScript创建<style>元素，然后将包含@media的规则写入其中，再挂载到页面的<head>里。在React中可以结合useEffect和useRef来实现：

import { useEffect, useRef } from 'react';

function App() {
  const styleSheetRef = useRef(null);

  useEffect(() => {
    // 创建style元素并挂载到head
    const styleSheet = document.createElement('style');
    document.head.appendChild(styleSheet);
    styleSheetRef.current = styleSheet;

    // 定义包含@media的CSS规则
    const mediaQueryRule = `
      @media (max-width: 768px) {
        .dynamic-media-element {
          background-color: red;
          padding: 1rem;
        }
      }
    `;
    // 将规则写入style元素
    styleSheetRef.current.textContent = mediaQueryRule;

    // 组件卸载时清理style元素
    return () => {
      document.head.removeChild(styleSheetRef.current);
    };
  }, []);

  return <div className="dynamic-media-element">自适应背景的元素</div>;
}

export default App;

方法二：结合CSS变量与预定义的@media规则 #

先在全局CSS中定义好@media规则，然后通过JavaScript动态修改对应的CSS变量，间接实现媒体查询下的样式控制：

全局CSS（比如App.css） #

.target-element {
  background-color: var(--desktop-bg, #fff);
}

@media (max-width: 768px) {
  .target-element {
    background-color: var(--mobile-bg, #eee);
  }
}

React组件代码 #

import { useEffect, useRef } from 'react';
import './App.css';

function App() {
  const elementRef = useRef(null);

  useEffect(() => {
    if (elementRef.current) {
      // 修改桌面端背景色变量
      elementRef.current.style.setProperty('--desktop-bg', '#2c3e50');
      // 修改移动端背景色变量
      elementRef.current.style.setProperty('--mobile-bg', '#e74c3c');
    }
  }, []);

  return <div ref={elementRef} className="target-element">通过变量控制的自适应元素</div>;
}

export default App;

这两种方法都能避免手动监听屏幕尺寸，直接通过JS关联@media规则的样式效果。

内容的提问来源于stack exchange，提问作者Roman