Javascript react中的设备特定样式加载

我有一个应用程序，其中我使用不同的移动和桌面视图，而不是响应性设计。我正在为我的应用程序使用服务器端渲染

以下是浏览器启动程序文件的代码

从“React”导入React；
从“./shared/App”导入应用程序；
从“./shared/MobApp”导入MobApp；
水合物（{uuuu是移动的：}

在这里，我呈现“MobApp”组件，以防网站加载到手机上；呈现“App”，以防网站加载到桌面上

下面是“MobApp”组件的伪代码

import React，{Component}来自'React'；
从“./views/Mobile/layouts/Header”导入标题；
导入“/MobApp.scss”；
导出类MobApp扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
导出默认MobApp

很明显，我使用导入来加载组件级CSS。现在，这个组件中的“Header”组件有了自己的CSS导入

问题- 如果有人在桌面视图上打开站点，“MobApp”导入的代码（如MobApp.scss）及其所有子组件（如“Header”）也包括在内。因此，我可以在桌面上获取移动组件的CSS

我可以使用哪些方法来避免这种情况

• 我已经读过关于有条件导入的文章，并将尝试它们，但我想知道是否有更好的方法
• 另外，如果我需要更改将CSS添加到组件的方式，或者是否有更具可伸缩性的方式来执行相同操作以避免将来出现任何问题，请告知我