你可以直接导入你的css查询文件到“index.js”或者任何你正在使用的js文件。像这样导入import './style.css'就足够了。没有办法把样式表和媒体查询链接起来来响应组件。

您可以使用require和conditional import模块，如下例所示：

if (window.innerWidth < 480) {
  require('./index.css')
}

如果你更喜欢使用ES6 import，它不能直接运行，你需要配置它.查看babel插件动态导入here
Note: the above example works after a reload if you are dynamically changing screen size in browser but, if you initially start with a smaller screen size, the css will load. if you need to dynamically re-render your component when the user or developer resizes the browser window, then implement that logic for re-rendering your component based on screen size

您还可以使用以下命令：每当窗口加载或屏幕大小更改时，该功能将执行，您可以根据需要对其进行自定义。

let importCSS = function(event) {
    if (window.innerWidth < 480) {
       require('./index.css')
    }
}
window.addEventListener("load",importCSS);
window.addEventListener("resize", importCSS);

前面的答案是可以的，但是考虑到您需要动态地呈现它，这将不起作用，因为当窗口发生变化时，您实际上并没有获得窗口值。
我建议你做以下几点：您可以使用模块，这样您就可以"重新创建"媒体系列是如何工作的：[name].module.css
JSX：

import {useState, useEffect} from "react"
   import homeStyles from "../public/Home.module.css"

export default function App() {
  
  const [value, setValue] = useState(window.innerWidth)

  useEffect(() => {
     window.addEventListener("resize", () => {
       setValue(window.innerWidth)
     })
  }, [])

  return (
    <div>
      <h1 className={
        value < 650 ? homeStyles.colorOne : homeStyles.colorTwo
      }>
        The value is
        {
          value
        }
      </h1>
    </div>
  );
}

CSS：

.colorOne {
  color: blue;
}

.colorTwo {
  color: red;
}

这样，您就可以使用我上面编写的代码和window.innerWidth值重新创建媒体查询，例如：
这与媒体查询的工作原理完全相同，是的，这是不一样的，但如果你真的必须这样做，你可以试试这个。