是否可以在React中卸载动态CSS导入？

Question

我有两个文件，我用react.lazy 和 suspense 加载：

import React, { Suspense, lazy }  from "react";
import { Route, Redirect } from 'react-router-dom';
const MainLayout = lazy(()  => import('Components/Layout/MainLayout'))

export const PrivateRoute = () => (
  <Route  render={() => {
    return (
      localStorage.getItem('user')  != null// validation that it is a valid user
          ?
          <Suspense fallback={<div>Loading...</div>}>            
          <MainLayout/>
          </Suspense>
          : <Redirect to={{ pathname: '/login'}} />)
  }} />
)

第二：

import React, { Suspense, lazy } from "react";
const DefaultLayout = lazy(()  => import('Components/Layout/DefaultLayout'))

export const PublicRoute = () => (
    <Suspense fallback={<div>Loading...</div>}>            
        <DefaultLayout/>
    </Suspense>
  )

该/login路径引用了 DefaultLayout 组件内部的组件（登录）。

设想：

当用户未登录时，我加载 DefaultLayout 组件，该组件又包含导入 cssFile1.css 的登录组件。

当用户输入凭据时，我将它们转发到 PrivateRoute 中包含的路径，其中又包含 cssFile2.css

这里的问题是，当我使用登录页面时加载了 cssFile1.css，但是当用户登录时我想卸载 cssFile1.css，这是否可能，如果是，那么如何？

Answer 1

如果我理解正确的话，那么不，这是不可能的，因为Webpack在React编译时导入了css，无论如何，你可以尝试css in jslibs，比如Aphrodite。