Question

我有一个应用程序，其中我在移动设备和台式机上使用不同的视图，而不是进行响应式设计。我正在为我的应用程序使用服务器端渲染。

这是浏览器启动文件的代码

import React from "react";
import App from "../shared/App";
import MobApp from "../shared/MobApp";

hydrate(<BrowserRouter>{__IS_MOBILE__ ? <MobApp /> : <App />}</BrowserRouter>

在此情况下，如果网站在移动设备上加载，则渲染“ MobApp”组件，在网站在桌面上加载的情况下，渲染“ App”组件。

这是'MobApp'组件的伪代码

import React,{ Component } from 'react';
import Header from './views/Mobile/layouts/Header';

import './MobApp.scss';

export class MobApp extends Component {
 constructor(props) {
   super(props);
 }

 render() {
   return (
     <div>
       <Header />
     </div>
   );
 }
}

export default MobApp

很明显，我正在使用import来加载组件级CSS。现在，其中的“ Header”组件具有自己的CSS导入。

问题- 如果有人在桌面视图上打开该网站，还将包括“ MobApp”导入的代码（如MobApp.scss）及其所有子组件（如“ Header”）。结果，我能够在台式机上获得移动组件的CSS。

我可以使用所有什么方法来避免这种情况？

我已经阅读了有关条件导入的信息，并将尝试使用它们，但想知道那里是否还有更好的东西。
此外，让我知道是否需要更改在组件中添加CSS的方式，或者是否有更可扩展的方法来避免将来出现任何问题。

在React中加载特定于设备的样式

0 个答案: