是否可以在反应中卸载动态 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，反正你可以试试 ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ这样一个css in js libs，

Answer 2

好的，这可能不是最优化的方法，但是不能对 cssFile1.css 中的整个cssFile1.css进行限定吗？ 就像所有规则一样，如果它们位于某个容器内，则所有规则都是针对元素编写的，其中 class 说是“cssFile1”。

同样，第二个 CSS 文件将只针对所有元素，前提是它们位于具有 class 'cssFile2' 的容器内。

现在你所要做的就是“卸载/切换” css 正在更改主容器 class 并且相应的 CSS 规则将适用。

最后一个提示是，如果您使用的是 SASS / LESS，只需将规则封装在容器中，所有规则都将在编译时确定范围。

Answer 3

我在 React 中找到了一种（某种）合理的方法来做到这一点。 简而言之，您可以延迟加载包含import './style.css'的 React 组件，并且在加载时，您可以捕获导入的StyleSheet以稍后切换其StyleSheet.disabled属性。

这是我对这个问题的原始解决方案。

这是一个要点。