时间戳

首页 > 解决方案 > 使用 React-Router 的多页面 React 应用程序中基于当前活动组件导入的样式表

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 容器的上层堆栈，比如 document，#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")
);

标签： reactjsreact-router

解决方案

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

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

推荐阅读