时间戳

首页 > 解决方案 > 有没有办法根据 ReactJS 中的媒体导入 CSS 文件

css - 有没有办法根据 ReactJS 中的媒体导入 CSS 文件

问题描述

在一个标准的 HTML 文件中，我们可以链接多个 CSS，然后浏览器将使用符合媒体条件的那个，例如：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">
<link rel="stylesheet" media="screen and (min-width: 600px)" href="web.css">

是否可以在 ReactJS 中做同样的事情？像 ：

import './web.css'; //for web
import './mob.css'; //for mobile
.
.
.
ReactDOM.render(<App/>,document.getElementById('root')); //main app

谢谢

标签： cssreactjsmedia-queries

解决方案

您可以尝试条件导入

if (window.innerWidth > 767) {
    import('./web.css').then(() => {
       console.log("Imported web css");
    });
}
else{
    import('./mob.css').then(() => {
       console.log("Imported mobile css");
    });
}

但我会建议你在 CSS 文件中使用媒体查询，这在更改方面会更方便

推荐阅读