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

Question

在标准 HTML 文件中，我们可以 link 多个 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

谢谢

Answer 1

您可以尝试条件导入

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

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

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

Is there a way to import a CSS file according to media in ReactJS

css

media-queries

reactjs