为所有路由反应路由器CSS

Question

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

如何在不在每条路线中单独应用它的情况下，为所有组件（Root，Path1）提供15％的左右边距，而不是导航栏？

我尝试将样式应用于Switch和包装Switch的div，但这些都没有效果（请参阅CodeSandbox）。

Answer 1

用div包裹Switch并将样式应用于它。例如：

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

Answer 2

路线以下列结构构建：

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

因此，您可以使用以下方式专门定位路线：

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

请注意>的使用。这被称为 child combinator ，仅针对直系孩子。这意味着，只有<div>个元素的<div>个元素才会被定位，而这些元素又是#root的直接子元素。

我已经创建了一个展示此 here 的更新版本。

希望这有帮助！ ：）

Answer 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