为所有路由反应路由器 CSS答案

【问题标题】：React router CSS for all routes为所有路由反应路由器 CSS
【发布时间】：2018-06-02 12:58:15
【问题描述】：

  <BrowserRouter>
    <div>
      <NavigationBar />
      <Switch>
        <Route exact path="/" component={Root} />
        <Route path="/Path1" component={Path1} />
      </Switch>
    </div>
  </BrowserRouter>

如果不在每条路线中单独应用，我怎样才能给所有组件（Root、Path1）15% 的左右边距，而不是导航栏？

我已尝试将样式应用于 Switch 和包装 Switch 的 div，但这些都不起作用（请参阅 CodeSandbox）。

【问题讨论】：

标签： css reactjs react-router react-router-dom

【解决方案1】：

用 div 包裹 Switch 并对其应用样式。例如：

<div style={styles}><Switch>....</Switch><div>

【讨论】：

【解决方案2】：

路由建立在以下结构中：

<div id="root">
  <div>
    <nav>
    <div>Route</div>
  </div>
</div>

因此，您可以通过以下方式专门针对路线：

#root > div > div {
  margin: 0 15%;
}

注意> 的使用。这称为 child combinator，仅针对直系子级。这意味着只有 <div> 元素是 <div> 的直接子元素，而这些元素又是 #root 的直接子元素，才会成为目标。

我创建了一个更新版本来展示这个 here。

希望这会有所帮助！ :)

【讨论】：

【解决方案3】：

遇到此类问题时，请使用点击式检查器工具 (⌘ + shift + C)。

检查后，你会看到你的导航栏结构是这样的：

<nav class="navbar navbar-default">
  <div class="container">
    <ul class="nav navbar-nav">
      <li role="presentation" class=""><a href="/">Route1</a></li>
      <li role="presentation" class=""><a href="/Route2">Route2</a></li>
    </ul>
  </div>
</nav>

所以要针对所有<li>，你可以简单地做

.nav>li {
  margin: 0 15%
}

或.nav>li>a，如果您想直接申请链接。

CSS 特异性得分

您必须了解的东西才能编写可预测的 CSS 并一起避免这样的情况！

例如。假设如果在应用上述边距后，您这样做：

li {
  margin: 0;
}

您会意识到，由于特异性得分较低，这种样式根本不会被应用。

.nav > li 有一个class 和一个element。

li 只有element，因此得分较低。

这很容易理解，但不幸的是没有多少人知道。

5 min read to understand CSS Specificity Score

【讨论】：