React router CSS 用于所有路由

Question

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

如何给所有组件（Root、Path1）一个 15% 的左右边距，而不是导航栏，而不应用它在dividually in每条路线？

我尝试将样式应用于 Switch 和包装 Switch 的 div，但其中 none 有效（请参阅 CodeSandbox）。

Answer 1

路由按以下结构构建：

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

因此，您可以专门针对路线：

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

注意 > 的用法。这被称为 child combinator，并且仅针对直系子级。这意味着只有 <div> 元素是 <div> 元素的直接子元素，而这些元素又是 #root 的直接子元素。

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

希望对您有所帮助！ :)

Answer 2

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

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

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 如果您打算直接申请 link。

CSS 特异性得分

您必须理解的东西才能写出可预测的CSS并避免这样的情况！

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

li {
  margin: 0;
}

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

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

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

这件事真的很容易理解，但不幸的是没有那么多人知道。

5 min read to understand CSS Specificity Score

React router CSS 用于所有路由

React router CSS for all routes

css

reactjs

react-router

react-router-dom

CSS 特异性得分