Question

在对多页面的React应用程序使用react-router时，我发现要基于路径呈现的不同组件会在这些组件中显示样式表，即使未显示相应的组件也是如此。

我正在四处添加“赞助商”页面到我的网站，而CSS的行为异常。深入研究chrome devtools的问题后，我发现我主页上的css不在页面上，而页面却未显示，从而导致了意外的样式。

我尝试研究这是否是没有任何运气的预期行为。我从路由代码中删除了首页，并且样式在其他组件中的行为与预期相同，证明了导入是问题所在。

我的路由代码：

const INITIAL_STATE = { jobs: [] }

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case FETCH_JOBS:
      const jobs = action.payload.listings.listing
      return { ...state, jobs };
    default:
      return state;
  }
}

当然可以

mapStateToProps = ({ jobs }) => {
  return { jobs }
}

在该文件的顶部。

并在MainPage.js顶部：

<Switch>
          <Route 
          exact path="/" 
          render={props => <MainPage language = {this.state.language}/>}
          />
          <Route 
          path="/Sponsors/" 
          render={props => <Sponsors language = {this.state.language}/>}
          />
</Switch>

看起来像这样的导入，并且在Sponsors.css中具有相同的类型。

即使该URL位于/ Sponsors（即，不应渲染MainPage组件），该MainPage.css中的任何代码也会影响Sponsors组件中的元素。

我希望确保我了解react-router的行为，当不呈现MainPage时，MainPage.css应该不会出现。作为替代方案，我可以编写足够具体的css，以确保这种情况永远不会发生，但是据我了解，react的模块化本质并不是必需的，因为我只能为要呈现的代码编写足够具体的css。我误会了吗？

Answer 1

我了解到您正在尝试将CSS的范围限制为模块，通常它具有全局范围。您可以使用“ CSS模块”来克服这种行为。

请从Facebook找到文章。 https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

希望它将有助于解决该问题。

即使未渲染该组件时，导入用于React-Router的组件也会显示该组件中使用的样式表吗？

1 个答案: