将样式表与媒体查询链接到React组件

Question

在html文件中，可以像这样链接样式表：

    <link rel="stylesheet" media="(min-width: 768px)" href="small.css">
    <link rel="stylesheet" media="(min-width: 1150px)" href="big.css">

在JSX文件中，您只能导入css文件，例如：import "./big.css"

如何根据屏幕大小有条件地将CSS文件导入React组件？

Answer 1

您可以仅将查询CSS文件导入“ index.js”或您使用的任何基本js文件中。像这样number导入就足够了。无法将样式表与媒体查询链接以响应组件。

Answer 2

您可以使用require和有条件地导入模块，例如以下示例：

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