Есть ли способ импортировать файл CSS в соответствии с носителем в ReactJS

Question

В стандартном файле 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

Спасибо

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, что будет более удобно с точки зрения изменения