Reactjs 基于带有React Router的多页React应用程序中的当前活动组件导入的样式表

目前的情况是，我有多个组件，每个组件都有不同的样式表，我开始合并它们

问题是，在主index.js文件中导入组件时，每个样式表都是全局导入的

// Auth stylesheet found in Auth.js(component)
import './style.sass';

// Auth component being imported in index.js file
import Auth from "./components/Auth/Auth";

这里是冲突部分，特别是对于DOM容器的上层堆栈，如文档#root

当组件呈现到DOM中时，是否有任何方法可以导入每个组件的样式表？当一个组件被主动呈现时，每个样式表都需要导入，这是非常繁琐的

这是我的index.js文件，以防万一，在这里我定义了与网站不同部分相对应的自定义路由

...

let store = createStore(rootReducer, app, applyMiddleware(
    ThunkMiddleware,
    logger
));

render(
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route exact path="/" component={Welcome}/>
                <Route exact path="/auth" component={Auth}/>
                <Route exact path="/main" component={Main}/>
                ...
            </Switch>
        </BrowserRouter>
    </Provider>,
    document.getElementById("root")
);

。。。
let store=createStore（rootReducer、app、applyMiddleware(
Thunk，
记录器
));
渲染(
...
,
document.getElementById（“根”）
);

使用样式的唯一方法是 1.导入它们并在组件上使用classname属性。 2.线条样式。通过直接在组件上调用样式表

<form style={{backgroundColor: ‘black’}}> <\form>

---

我可以使用

课前

let cssloaded = false;

设cssloaded=false
在渲染中加载dis

 if(cssloaded === false){ 
        `cssloader = true;`
         import ('.././style/index.css');
          import ('.././style/css/style.css');
    }

所以你想延迟加载样式表？这可能会创建一个糟糕的UX，因为在您第一次访问组件时，未设置样式的组件可能会出现在闪存中，因为加载样式表需要时间。如果延迟加载样式表，您的意思是在呈现组件之前导入，那么是的。我通常在我的项目中使用
设置样式的组件
，但我确信您可以在组件文件中导入每个组件的CSS，而不是在全局
index.js
上。因此，对于您的示例，请在Auth的组件文件中导入样式。这就是你想要的吗？这样，您的index.js就不需要导入所有css，只需导入components@pavlag我做了一个编辑，基本上每个组件都在导入他的样式表，因此如果index.js导入每个组件，它也会包含每个样式表，所以不，不是我想要的。哦，我明白了。然后我可能会遵循@Li357的建议，只在加载组件时才延迟加载css，但我认为这是不可能的，因为正如您所说，您将文件直接导入index.js。一种方法是给每个路由一个
classname
，并将每个文件中除公共/基本css之外的所有css范围都赋给相应的类，然后我将如何以反应方式将css样式注入DOM元素，如document&window？谢谢分享！是否可以将该代码包装成
代码块
，使其更易于阅读？我想你只需要在它周围加上记号。